import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import {
  Badge,
  Drawer,
  Icon as AIcon,
  Select as ASelect,
  Modal,
  Tooltip,
  Checkbox,
  Tree,
  Button,
  message,
  Input,
  Switch, Alert, Spin, Form
} from 'antd';
import {afterCloseModal} from '@/utils/utils';
import ValveData from './../ValveFlowMeterSite/ValveData';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import moment from 'moment';
import GeoJSON from 'ol/format/GeoJSON';
import find from 'lodash/find';
import debounce from 'lodash/debounce';
import {DragBox, Select} from 'ol/interaction';
import BuildModalTitle from '@/components/BuildModalTitle';
import {boundingExtent, getCenter} from 'ol/extent';
import request from '@/utils/request';
// 图层
import {Vector} from 'ol/layer';
// 数据源
import {Vector as VectorSource} from 'ol/source';
// 要素
import Feature from 'ol/Feature';
// 样式
import {Icon, Style, Text, Fill, Stroke} from 'ol/style';
import LineString from 'ol/geom/LineString';
import Point from 'ol/geom/Point';
// 坐标系转化
import {fromLonLat, toLonLat} from 'ol/proj';
import './../Home/openlayers.less';
import './../LeafletImg/index.less';

import shuang from './../../images/shuang.png';
import shuang_red from './../../images/shuang_red.png';
import water from './../../images/water.png';
import yaogan from './../../images/yaogan.jpg';
import jiedao from './../../images/jiedao.jpg';
import yali_blue from './../../images/yali_blue.png';
import yali_red from './../../images/yali_red.png';
import yali_warm from './../../images/yali_red.gif';
import jinggai from './../../images/jinggai.png';
import jianyafa from './../../images/jianyafa.png';
import santong from './../../images/santong.png';
import sitong from './../../images/sitong.png';
import dutou from './../../images/dutou.png';
import bianjingdian from './../../images/bianjingdian.png';
import zhixiandian from './../../images/zhixiandian.png';
import zhuanzhedian from './../../images/zhuanzhedian.png';
import issure_arrow from './../../images/arrow-right.png';
import famenjing from './../../images/famenjing.png';
import celiangji from './../../images/celiangji.png';
import famen2 from './../../images/famen2.png';
import xiaofanshuang from './../../images/xiaofanshuang.png';
import shuibiaojing from './../../images/shuibiaojing.png';
import paiqifa from './../../images/paiqifa.png';
import shuichuang10 from './../../images/shuichang10.png';
import Detail from '../Pressure_sensors/Detail';
import SelectModalContent from './SelectModal';
import AddImg from './addImg';
import Chart from '../LeafletImg/Chart';
import WaterDevice from '../LeafletImg/Index';
import ConstructionDate from './ConstructionDate';
import {getArea, getLength} from 'ol/sphere';
import CircleStyle from 'ol/style/Circle';
import Draw from 'ol/interaction/Draw';
import Polygon from 'ol/geom/Polygon';
import {unByKey} from 'ol/Observable';
import Zmage from 'react-zmage';
import EditSite from './EditSite';
import EditChartParams from './EditChartParams';
import AddOrEditMeter from '../ValveFlowMeterSite/addOrEditUser';
import ValveData2 from '../ValveFlowMeterSite/ValveData2';
import ValveData3 from '../ValveFlowMeterSite/ValveData3';
import ValveData4 from '../ValveFlowMeterSite/ValveData4';
import ValveData5 from '../ValveFlowMeterSite/ValveData5';
import ValveData6 from '../ValveFlowMeterSite/ValveData6';
import ValveData8 from '../ValveFlowMeterSite/ValveData8';
import axios from 'axios';
import styles from '@/pages/ValveFlowMeterSIte/index.less';
import ValveData9 from '@/pages/ValveFlowMeterSIte/ValveData9';
import ValveData10 from '@/pages/ValveFlowMeterSIte/ValveData10';
import ValveData11 from '@/pages/ValveFlowMeterSIte/ValveData11';
import ValveData12 from '@/pages/ValveFlowMeterSIte/ValveData12';
import ValveData13 from '@/pages/ValveFlowMeterSIte/ValveData13';
import Street from './Street'
import ValveData23 from "@/pages/ValveFlowMeterSIte/ValveData23";
import ValveData19 from "@/pages/ValveFlowMeterSIte/ValveData19";
import ValveData14 from "@/pages/ValveFlowMeterSIte/ValveData14";
import ValveData15 from "@/pages/ValveFlowMeterSIte/ValveData15";
import ValveData16 from "@/pages/ValveFlowMeterSIte/ValveData16";
import ValveData20 from "@/pages/ValveFlowMeterSIte/ValveData20";
import ValveData21 from "@/pages/ValveFlowMeterSIte/ValveData21";
import ValveData35 from "@/pages/ValveFlowMeterSIte/ValveData35";
import ValveData36 from "@/pages/ValveFlowMeterSIte/ValveData36";
import ValveData24 from "@/pages/ValveFlowMeterSIte/ValveData24";
import ValveData25 from "@/pages/ValveFlowMeterSIte/ValveData25";
import ValveData27 from "@/pages/ValveFlowMeterSIte/ValveData27";
import ValveData26 from "@/pages/ValveFlowMeterSIte/ValveData26";
import ValveData29 from "@/pages/ValveFlowMeterSIte/ValveData29";
import ValveData40 from "@/pages/ValveFlowMeterSIte/ValveData40";

const {Option} = ASelect;
const {TreeNode} = Tree;
const noSHowIcon = 11.5;
const noSHowText = 13;
const {confirm} = Modal;
const FormItem = Form.Item;
const {Search} = Input;
const appendageCharacMap = [
  {key: 'valveWell', url: 'valve-well', checkedKeyName: 'appendageCheckedKeys', img: famenjing},
  {key: 'measuringMeter', url: 'measuring-meter', checkedKeyName: 'appendageCheckedKeys', img: celiangji},
  {key: 'valve', url: 'valve', checkedKeyName: 'appendageCheckedKeys', img: famen2},
  {key: 'fireHydrant', url: 'fire-hydrant', checkedKeyName: 'appendageCheckedKeys', img: xiaofanshuang},
  {key: 'waterMeterWell', url: 'water-meter(well)', checkedKeyName: 'appendageCheckedKeys', img: shuibiaojing},
  {key: 'exhaustValveWell', url: 'exhaust-valve(well)', checkedKeyName: 'appendageCheckedKeys', img: paiqifa},
  {key: 'straight', url: 'straight', checkedKeyName: 'characteristicCheckedKeys', img: zhixiandian},
  {key: 'teeJoint', url: 'tee-joint', checkedKeyName: 'characteristicCheckedKeys', img: santong},
  {key: 'turningPoint', url: 'turning-point', checkedKeyName: 'characteristicCheckedKeys', img: zhuanzhedian},
  {
    key: 'changeDiameterPoint',
    url: 'change-diameter-point',
    checkedKeyName: 'characteristicCheckedKeys',
    img: bianjingdian,
  },
  {key: 'plug', url: 'plug', checkedKeyName: 'characteristicCheckedKeys', img: dutou},
  {key: 'quadJoint', url: 'quad-joint', checkedKeyName: 'characteristicCheckedKeys', img: sitong},
];

@connect(({pipe_home, loading}) => ({
  pipe_home,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.map = null;
    this.state = {
      points: [],
      markerArr: [],
      editRecord: {},
      selectFeature: [],
      canDrag: false,
      pipePointData: {},
      calculateType: '',
      imgList: [],
      searchKey: (Math.random() * 10).toString(),
      construction_key: '',
      street: '',
      construction_date: '',
      valve_flowmeter_site_data: {},
      pipe_construction_date: {},
      appendageCharacLatLag: [],
      originPipeValue: {},
      originStreetValue: {},
    };
  }

  changeMapType = (maptype) => {
    const {dispatch, pipe_home: {mapType}} = this.props;
    if (maptype === mapType) {
      return false;
    }
    dispatch({
      type: 'pipe_home/changeMapType',
      payload: maptype,
    });

  };

  componentDidMount() {
    document.title='站点GIS地图'
    document.querySelector('html').style.minWidth='100vw'
    document.querySelector('body').style.minWidth='100vw'
    document.querySelector('#root').style.minWidth='100vw'
    const {dispatch, pipe_home: {pageLoaded}} = this.props;
    console.log('pageLoaded', pageLoaded);
    if (pageLoaded) {
      this.renderMap();
      dispatch({
        type: 'pipe_home/fetchDesignPipe',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderDesignPipe();
        },
      });
      dispatch({
        type: 'pipe_home/fetchPipe',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderPipe();

          for (let i = 0; i < appendageCharacMap.length; i++) {
            dispatch({
              type: 'pipe_home/fetchAppendageCharac',
              payload: appendageCharacMap[i],
              callback: () => {
                console.log('fetchAppendageCharac callback');
                that.renderAppendageCharac(appendageCharacMap[i]);
              },
            });
          }

        },
      });
      dispatch({
        type: 'pipe_home/fetchHoleCover',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderHoleCover();
        },
      });
      dispatch({
        type: 'pipe_home/fetchReduceValve',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderReduceValve();
        },
      });
      dispatch({
        type: 'pipe_home/fetchACAD_4',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderACAD4();
        },
      });
      dispatch({
        type: 'pipe_home/fetchACAD_6',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderACAD6();
        },
      });

      dispatch({
        type: 'pipe_home/fetchACAD_3',
        payload: {},
        callback: () => {
          console.log('callback');
          that.renderACAD3();
        },
      });
      // dispatch({
      //   type: 'pipe_home/fetchACAD_2',
      //   payload: {},
      //   callback: () => {
      //     console.log('callback');
      //     that.renderACAD2();
      //   },
      // });

    } else {
      const {
        pipe_home: {searchParams},
      } = this.props;
      dispatch({
        type: 'pipe_home/fetch',
        payload: searchParams,
        callback: () => {
          this.renderMap();
          const {dispatch} = this.props;
          dispatch({
            type: 'pipe_home/changeLoaded',
          });

          dispatch({
            type: 'pipe_home/fetchDesignPipe',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderDesignPipe();
            },
          });
          dispatch({
            type: 'pipe_home/fetchPipe',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderPipe();
              for (let i = 0; i < appendageCharacMap.length; i++) {
                dispatch({
                  type: 'pipe_home/fetchAppendageCharac',
                  payload: appendageCharacMap[i],
                  callback: () => {
                    console.log('fetchAppendageCharac callback');
                    that.renderAppendageCharac(appendageCharacMap[i]);
                  },
                });
              }
            },
          });

          dispatch({
            type: 'pipe_home/fetchHoleCover',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderHoleCover();
            },
          });
          dispatch({
            type: 'pipe_home/fetchReduceValve',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderReduceValve();
            },
          });
          dispatch({
            type: 'pipe_home/fetchACAD_4',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderACAD4();
            },
          });
          dispatch({
            type: 'pipe_home/fetchACAD_6',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderACAD6();
            },
          });

          dispatch({
            type: 'pipe_home/fetchACAD_3',
            payload: {},
            callback: () => {
              console.log('callback');
              that.renderACAD3();
            },
          });
          // dispatch({
          //   type: 'pipe_home/fetchACAD_2',
          //   payload: {},
          //   callback: () => {
          //     console.log('callback');
          //     that.renderACAD2();
          //   },
          // });

        },
      });


    }
    const that = this;
    this.timer = setInterval(function () {
      dispatch({
        type: 'pipe_home/fetch',
        payload: {},
        callback: () => {
          that.renderPoint();
          that.renderWorkstations1Point()
        },
      });
    }, 30000);
    this.fetchAllPipeStreet()

    this.refleshTimer = setTimeout(function () {
      window.location.reload()
    }, 3600000)
  }

  fetchAllPipeStreet = (callback) => {
    const that = this
    request(`/guest/annotations/pipe_street`, {
      method: 'get',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          originStreetValue: response.data.data.value,
        }, function () {
          if (callback) callback()
        });
      }
    });
  }

  componentWillUnmount() {
    if (this.timer) {
      console.log('clearInterval(this.timer)');
      clearInterval(this.timer);
    }
    if (this.onePointDataTimer) {
      console.log(' clearTimeout(that.onePointDataTimer)');
      clearTimeout(this.onePointDataTimer);
    }
    if (this.oneWaterDataTimer) {
      clearTimeout(this.oneWaterDataTimer);
    }
    if (this.refleshTimer) {
      clearTimeout(this.refleshTimer);
    }

  }

  //生成附属物和特征
  renderAppendageCharac = (item) => {
    const {pipe_home: {holeCover}} = this.props;
    const checkedKeyName = this.props.pipe_home[item.checkedKeyName];
    const appendageCharacData = this.props.pipe_home[item.key];
    if (checkedKeyName.indexOf(item.key) < 0) {
      return;
    }
    let appendageCharacSource = this[`${item.key}VectorSource`] = new VectorSource({
      appendageCharacType: item.key,
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(appendageCharacData),
    });
    let appendageCharacVectorLayer = this[`${item.key}VectorLayer`] = new Vector({
      source: appendageCharacSource,
      zIndex: 13,
      appendageCharacType: item.key,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: item.img ? item.img : jinggai,
        }),
      }),
    });
    this.map.addLayer(appendageCharacVectorLayer);
  };

  renderPipe = () => {
    const {pipe_home: {pipeData, pipeVisiable}} = this.props;
    console.log('pipeData', pipeData);
    if (!pipeVisiable) {
      return;
    }
    let pipeVectorSource = this.pipeVectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(pipeData),
    });
    const originStreetValue = this.state.originStreetValue;
    console.log('originStreetValue', originStreetValue)
    let pipeVectorLayer = this.pipeVectorLayer = new Vector({
      source: pipeVectorSource,
      zIndex: 11,
      // style: new Style({
      //   stroke: new Stroke({
      //     color: 'rgb(57, 196, 93)',
      //     width: 5,
      //   }),
      // }),

      style: function (feature, resolution) {

        // console.log('feature',feature.get('材质'))
        let id = feature.get('id');
        return new Style({
          stroke: new Stroke({
            color: originStreetValue[`street${id}`] ? 'rgb(57, 196, 93)' : 'rgb(255,116,0)',
            width: 2,
            lineDash: [0]

          }),
        })
      }

      // style: [//流动的线
      //   new Style({
      //     stroke: new Stroke({
      //       color: '#f00',
      //       width: 3,
      //       lineDash: [0]
      //     })
      //   }),
      //   new Style({
      //     stroke: new Stroke({
      //       color: '#ff0',
      //       width: 3,
      //       lineDash: [20, 27]
      //     })
      //   })
      // ]
    });
    this.map.addLayer(pipeVectorLayer);

    // pipeVectorLayer.getSource().getFeatures().forEach((item) => {//流动的线
    //   setInterval(() => {
    //     let style = item.getStyle()
    //     if (style == undefined) {
    //       item.setStyle([
    //         new Style({
    //           stroke: new Stroke({
    //             color: '#f00',
    //             width: 3
    //           })
    //         }),
    //         new Style({
    //           stroke: new Stroke({
    //             color: '#ff0',
    //             width: 3,
    //             lineDash: [20, 27],
    //             lineDashOffset: 0
    //           })
    //         })
    //       ])
    //     } else {
    //       if(item.getStyle()[1]){
    //         let lineDashOffset = item.getStyle()[1].getStroke().getLineDashOffset()
    //         item.setStyle([
    //           new Style({
    //             stroke: new Stroke({
    //               color: '#f00',
    //               width: 3
    //             })
    //           }),
    //           new Style({
    //             stroke: new Stroke({
    //               color: '#ff0',
    //               width: 3,
    //               lineDash: [15, 15],
    //               lineDashOffset: lineDashOffset === 29 ? 0 : lineDashOffset + 1
    //             })
    //           })
    //         ])
    //       }
    //
    //     }
    //   }, 10)
    // })

    // this.renderPipeArrow()
  };
  renderPipeArrow = () => {
    const {pipe_home: {pipeData, pipeVisiable}} = this.props;
    if (!pipeVisiable) {
      return;
    }
    // console.log('pipeData',pipeData)
    let lineData = [];
    let linePerData = [];
    for (let i = 0; i < pipeData.features.length; i++) {
      if (linePerData.indexOf(pipeData.features[i].properties.id) >= 0) {
        console.log('pipeData.features[i].properties.id', pipeData.features[i].properties.id)
        console.log('存在相同')
      } else {
        lineData.push(pipeData.features[i].geometry.coordinates[0][1])
        linePerData.push(pipeData.features[i].properties.id)

      }
      // lineData.push(pipeData.features[i].geometry.coordinates[0][1])
      // linePerData.push(pipeData.features[i].properties.id)
    }
    console.log('lineData', lineData)
    const coordinates = lineData.map((item, index) => {
      return fromLonLat(item);
    });
    let lineFeature = new Feature(
      new LineString(coordinates),
    );
    let lineFeatureSource = this.lineFeatureSource = new VectorSource({
      features: [lineFeature],
    });
    let styleFunction = function (feature) {
      console.log('feature', feature)
      let caizhi = feature.get('材质');
      let geometry = feature.getGeometry();
      let dradio = 0.001;//投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
      let styles = [];
      for (let i = 0; i <= 1; i += dradio) {
        let arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end) {
          if (start[0] == end[0] || start[1] == end[1]) return;
          var dx1 = end[0] - arrowLocation[0];
          var dy1 = end[1] - arrowLocation[1];
          var dx2 = arrowLocation[0] - start[0];
          var dy2 = arrowLocation[1] - start[1];
          if (dx1 != dx2 && dy1 != dy2) {
            if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
              var dx = end[0] - start[0];
              var dy = end[1] - start[1];
              var rotation = Math.atan2(dy, dx);
              styles.push(new Style({

                geometry: new Point(arrowLocation),

                image: new Icon({
                  src: issure_arrow,
                  anchor: [0.75, 0.5],
                  rotateWithView: false,

                  rotation: -rotation + Math.PI,

                }),
              }));
            }
          }
        });
      }
      return styles
    }
    let lineVectorLayer = this.lineVectorLayer = new Vector({
      source: lineFeatureSource,
      zIndex: 12,
      style: styleFunction
    });
    this.map.addLayer(lineVectorLayer);
  };
  renderDesignPipe = () => {
    const {pipe_home: {designPipeData, designCheckedKeys}} = this.props;
    console.log('designCheckedKeys', designCheckedKeys);
    if (designCheckedKeys.indexOf('design1') < 0) {
      return;
    }
    let designPipeVectorSource = this.designPipeVectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(designPipeData),
    });
    console.log('designPipeVectorSource', designPipeVectorSource);
    let designPipeVectorLayer = this.designPipeVectorLayer = new Vector({
      source: designPipeVectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(0,160,239)',
          width: 2,

        }),
      }),
    });
    this.map.addLayer(designPipeVectorLayer);
  };
  renderHoleCover = () => {
    const {pipe_home: {holeCover, designCheckedKeys}} = this.props;
    if (designCheckedKeys.indexOf('holeCover') < 0) {
      return;
    }
    let holeCoverVectorSource = this.holeCoverVectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(holeCover),
    });
    let holeCoverVectorLayer = this.holeCoverVectorLayer = new Vector({
      source: holeCoverVectorSource,
      zIndex: 13,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: jinggai,
        }),
      }),
    });
    this.map.addLayer(holeCoverVectorLayer);
  };
  renderReduceValve = () => {
    const {pipe_home: {reduceValve, designCheckedKeys}} = this.props;
    if (designCheckedKeys.indexOf('reduceValve') < 0) {
      return;
    }
    let reduceValveVectorSource = this.reduceValveVectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(reduceValve),
    });
    let reduceValveVectorLayer = this.reduceValveVectorLayer = new Vector({
      source: reduceValveVectorSource,
      zIndex: 13,
      style: new Style({
        image: new Icon({
          anchorOrigin: 'top-right',
          offsetOrigin: 'top-right',
          //图标缩放比例
          scale: 1,
          //透明度
          opacity: 1,
          //图标的url
          src: jianyafa,
        }),
      }),
    });
    this.map.addLayer(reduceValveVectorLayer);
  };
  renderACAD4 = () => {
    const {pipe_home: {ACAD4Data, CADCheckedKeys}} = this.props;

    if (CADCheckedKeys.indexOf('design1') < 0) {
      return;
    }
    let ACAD4VectorSource = this.ACAD4VectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(ACAD4Data),
    });
    let ACAD4VectorLayer = this.ACAD4VectorLayer = new Vector({
      source: ACAD4VectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(255,255,255)',
          width: 1,

        }),
      }),
    });
    this.map.addLayer(ACAD4VectorLayer);
  };
  renderACAD6 = () => {
    const {pipe_home: {ACAD6Data, CADCheckedKeys}} = this.props;
    if (CADCheckedKeys.indexOf('design2') < 0) {
      return;
    }
    let ACAD6VectorSource = this.ACAD6VectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(ACAD6Data),
    });
    let ACAD6VectorLayer = this.ACAD6VectorLayer = new Vector({
      source: ACAD6VectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(0,242,255)',
          width: 1,

        }),
      }),
    });
    this.map.addLayer(ACAD6VectorLayer);
  };
  renderACAD3 = () => {
    const {pipe_home: {ACAD3Data, CADCheckedKeys}} = this.props;
    if (CADCheckedKeys.indexOf('design3') < 0) {
      return;
    }
    let ACAD3VectorSource = this.ACAD3VectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(ACAD3Data),
    });
    let ACAD3VectorLayer = this.ACAD3VectorLayer = new Vector({
      source: ACAD3VectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(255,74,0)',
          width: 1,

        }),
      }),
    });
    this.map.addLayer(ACAD3VectorLayer);
  };
  renderACAD2 = () => {
    const {pipe_home: {ACAD2Data, CADCheckedKeys}} = this.props;
    if (CADCheckedKeys.indexOf('design4') < 0) {
      return;
    }
    let ACAD2VectorSource = this.ACAD2VectorSource = new VectorSource({
      features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(ACAD2Data),
    });
    let ACAD2VectorLayer = this.ACAD2VectorLayer = new Vector({
      source: ACAD2VectorSource,
      zIndex: 10,
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(240,223,238)',
          width: 1,

        }),
      }),
    });
    this.map.addLayer(ACAD2VectorLayer);
  };
  renderPoint = () => {
    const {dispatch, pipe_home: {data, pressVisiable}} = this.props;
    //绘制点
    if (this.pressLayer) {
      this.map.removeLayer(this.pressLayer);
    }
    let pressFeature = [];
    for (let i = 0; i < data.length; i++) {
      let point = this.setPoint([data[i].longitude, data[i].latitude], {
        ...data[i],
        ground_set: 'press_sensor',
      }, (data[i].online_status) === 1 ? yali_blue : yali_warm);
      pressFeature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (pressVisiable && zoom >= noSHowIcon) {
      // 创建标注的数据源
      this.pressSource = new VectorSource({
        features: pressFeature,
      });
      // 创建标注图层
      this.pressLayer = new Vector({
        source: this.pressSource,
        zIndex: 15,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.pressLayer);
    }
  };
  renderWaterPoint = () => {
    const {dispatch, pipe_home: {waterData, waterVisiable}} = this.props;
    //绘制点
    if (this.waterLayer) {
      this.map.removeLayer(this.waterLayer);
    }
    let waterFeature = [];

    for (let i = 0; i < waterData.length; i++) {
      let point = new Feature({
        geometry: new Point(fromLonLat([waterData[i].longitude, waterData[i].latitude])),
        name: waterData[i].name,
        data_set: waterData[i].data,
        ground: 'water',
      });
      point.setStyle(this.setWaterMakerStyle(point));
      waterFeature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (waterVisiable && zoom >= noSHowIcon) {
      // 创建标注的数据源
      this.waterSource = new VectorSource({
        features: waterFeature,
      });
      // 创建标注图层
      this.waterLayer = new Vector({
        source: this.waterSource,
        zIndex: 15,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.waterLayer);
    }
  };
  renderWorkstations1Point = () => {
    console.log('renderWorkstations1Point');
    const {pipe_home: {Workstations1Data, workstations1Visiable}} = this.props;
    //绘制点
    if (this.workstations1Layer) {
      this.map.removeLayer(this.workstations1Layer);
    }
    let workstations1Feature = [];
    console.log('Workstations1Data', Workstations1Data);
    for (let i = 0; i < Workstations1Data.length; i++) {
      let point = this.setWorkstation1Point([Workstations1Data[i].longitude, Workstations1Data[i].latitude], {
        ...Workstations1Data[i],
        ground_set: 'workstations1',
      }, (Workstations1Data[i].online_status === -1 || Workstations1Data[i].alarm === 1) ? shuang_red : shuang);
      workstations1Feature.push(point);
    }
    let zoom = this.map.getView().getZoom();
    if (workstations1Visiable && zoom >= noSHowIcon) {
      console.log(workstations1Visiable && zoom >= noSHowIcon);
      // 创建标注的数据源
      this.workstations1Source = new VectorSource({
        features: workstations1Feature,
      });
      // 创建标注图层
      this.workstations1Layer = new Vector({
        source: this.workstations1Source,
        zIndex: 12,
      });
      // 将标注图层添加到地图上
      this.map.addLayer(this.workstations1Layer);
    }
  };
  changePressLayerVisiable = (e) => {
    console.log('changePressLayerVisiable')
    console.log(e)
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changePressLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const {dispatch, pipe_home: {data}} = that.props;
          let pressFeature = [];

          for (let i = 0; i < data.length; i++) {
            let point = that.setPoint([data[i].longitude, data[i].latitude], {
              ...data[i],
              ground_set: 'press_sensor',
            }, (data[i].online_status) === 1 ? yali_blue : yali_warm);
            pressFeature.push(point);
          }
          this.pressFeature = pressFeature;
          that.pressSource = new VectorSource({
            features: pressFeature,
          });
          that.pressLayer = new Vector({
            source: that.pressSource,
            zIndex: 15,
          });
          that.map.addLayer(this.pressLayer);
        } else {
          that.map.removeLayer(this.pressLayer);
          that.pressSource = null;
        }

      },
    });
  };
  changeWaterLayerVisiable = (e) => {
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeWaterLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const {dispatch, pipe_home: {waterData}} = that.props;

          let waterFeature = [];

          for (let i = 0; i < waterData.length; i++) {
            let point = new Feature({
              geometry: new Point(fromLonLat([waterData[i].longitude, waterData[i].latitude])),
              name: waterData[i].name,
              data_set: waterData[i].data,
              ground: 'water',
            });
            point.setStyle(this.setWaterMakerStyle(point));
            waterFeature.push(point);
          }
          this.waterFeature = waterFeature;
          this.waterSource = new VectorSource({
            features: waterFeature,
          });
          this.waterLayer = new Vector({
            source: this.waterSource,
            zIndex: 15,
          });
          this.map.addLayer(this.waterLayer);

        } else {
          that.map.removeLayer(this.waterLayer);
          that.waterSource = null;
        }

      },
    });
  };
  changeWorkstations1Visiable = (e) => {
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeWorkstations1Visiable',
      payload: e.target.checked,
      callback: () => {
        let zoom = this.map.getView().getZoom();
        if (e.target.checked && zoom >= noSHowIcon) {
          const {dispatch, pipe_home: {Workstations1Data}} = that.props;
          let workstations1Feature = [];

          for (let i = 0; i < Workstations1Data.length; i++) {
            let point = that.setPoint([Workstations1Data[i].longitude, Workstations1Data[i].latitude], {
              ...Workstations1Data[i],
              ground_set: 'workstations1',
            }, (Workstations1Data[i].online_status === -1 || Workstations1Data[i].alarm === 1) ? shuang_red : shuang);
            workstations1Feature.push(point);
          }
          that.workstations1Source = new VectorSource({
            features: workstations1Feature,
          });
          that.workstations1Layer = new Vector({
            source: that.workstations1Source,
            zIndex: 14,
          });
          that.map.addLayer(this.workstations1Layer);
        } else {
          that.map.removeLayer(this.workstations1Layer);
          that.workstations1Source = null;
        }

      },
    });
  };
  changePipeLayerVisiable = (e) => {
    const {dispatch} = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changePipeLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderPipe();
        } else {
          that.map.removeLayer(this.pipeVectorLayer);
          that.pipeVectorSource = null;
        }

      },
    });
  };
  changeHoleCoverLayerVisiable = (e) => {
    const {dispatch} = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changeHoleCoverLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderHoleCover();
        } else {
          that.map.removeLayer(this.holeCoverVectorLayer);
          that.holeCoverVectorSource = null;
        }

      },
    });
  };
  changeReduceValveLayerVisiable = (e) => {
    const {dispatch} = this.props;

    const that = this;
    dispatch({
      type: 'pipe_home/changeReduceValveLayerVisiable',
      payload: e.target.checked,
      callback: () => {
        if (e.target.checked) {
          that.renderReduceValve();
        } else {
          that.map.removeLayer(this.reduceValveVectorLayer);
          that.reduceValveVectorSource = null;
        }

      },
    });
  };
  exportPDF = () => {
    const map = this.map
    document.body.style.cursor = 'progress';
    const that = this
    this.setState({
      downloadModal: true
    })
    const dims = {
      a0: [1189, 841],
      a1: [841, 594],
      a2: [594, 420],
      a3: [420, 297],
      a4: [297, 210],
      a5: [210, 148],
    };
    const format = 'a1';
    const resolution = 96;
    const dim = dims[format];
    const width = Math.round((dim[0] * resolution) / 25.4);
    const height = Math.round((dim[1] * resolution) / 25.4);
    const size = map.getSize();
    const viewResolution = map.getView().getResolution();

    map.once('rendercomplete', function () {
      const mapCanvas = document.createElement('canvas');
      mapCanvas.width = width;
      mapCanvas.height = height;
      const mapContext = mapCanvas.getContext('2d');
      Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
          console.log('canvas', canvas)
          if (canvas.width > 0) {
            console.log('mapContext.drawImage')
            mapContext.drawImage(canvas, 0, 0);
          }
        }
      );
      console.log('jspdf', jspdf)
      const pdf = new jspdf.jsPDF('landscape', undefined, format);
      pdf.addImage(
        mapCanvas.toDataURL('image/jpeg'),
        'JPEG',
        0,
        0,
        dim[0],
        dim[1]
      );
      pdf.save('map.pdf');
      // Reset original map size
      map.setSize(size);
      map.getView().setResolution(viewResolution);
      document.body.style.cursor = 'auto';
      that.setState({
        downloadModal: false
      })
    });

    // Set print size
    const printSize = [width, height];
    map.setSize(printSize);
    const scaling = Math.min(width / size[0], height / size[1]);
    map.getView().setResolution(viewResolution / scaling);

  }
  renderMap = () => {
    const that = this;
    const {dispatch, pipe_home: {layers, zoom, center}} = this.props;
    let map = this.map = new Map({
      target: 'mapDiv',
      layers: layers,
      view: new View({
        center: fromLonLat(center),//经纬度
        zoom: zoom,
        maxZoom: 18,
        minZoom: 11.5,
      }),
    });
    console.log('renderMap');
    this.renderPoint();
    setTimeout(function () {
      that.renderWaterPoint();
      that.renderWorkstations1Point();
    }, 50);

    // let select = new Select({
    //   layers: [],
    // });
    let select = new Select({
      filter: function (feature, layer) {
        let isTrue = feature.get('长度');
        return Boolean(isTrue);
      },
      style: new Style({
        stroke: new Stroke({
          color: 'rgb(255,0,246)',
          width: 6,
        }),
      }),
    });
    map.addInteraction(select);

    let selectedFeatures = this.selectedFeatures = select.getFeatures();

    let dragBox = new DragBox({
      condition: function () {
        return that.state.canDrag;
      },
    });

    map.addInteraction(dragBox);

    dragBox.on('boxend', function () {
      var rotation = map.getView().getRotation();
      console.log('rotation', rotation);
      var oblique = rotation % (Math.PI / 2) !== 0;
      var candidateFeatures = oblique ? [] : selectedFeatures;
      var extent = dragBox.getGeometry().getExtent();
      console.log('oblique', oblique);
      console.log('extent', extent);
      const {
        pipe_home: {
          pressVisiable,
          pipeVisiable,
          waterVisiable,
          workstations1Visiable,
          appendageCheckedKeys,
          characteristicCheckedKeys
        }
      } = that.props;
      if (pressVisiable) {
        that.pressSource.forEachFeatureIntersectingExtent(extent, function (feature) {
          candidateFeatures.push(feature);
        });
      }
      if (pipeVisiable && that.pipeVectorSource) {
        that.pipeVectorSource.forEachFeatureIntersectingExtent(extent, function (feature) {
          candidateFeatures.push(feature);
        });
      }
      if (waterVisiable) {
        that.waterSource.forEachFeatureIntersectingExtent(extent, function (feature) {
          candidateFeatures.push(feature);
        });
      }
      if (workstations1Visiable) {
        that.workstations1Source.forEachFeatureIntersectingExtent(extent, function (feature) {
          candidateFeatures.push(feature);
        });
      }

      for (let i = 0; i < appendageCharacMap.length; i++) {
        if (appendageCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0) {
          that[`${appendageCharacMap[i].key}VectorSource`].forEachFeatureIntersectingExtent(extent, function (feature) {
            feature.set('ground', 'appendage');
            candidateFeatures.push(feature);
          });
        }
        if (characteristicCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0) {
          that[`${appendageCharacMap[i].key}VectorSource`].forEachFeatureIntersectingExtent(extent, function (feature) {
            feature.set('ground', 'characteristic');
            candidateFeatures.push(feature);
          });
        }
      }

      const selectCandidateFeatures = candidateFeatures.getArray();
      let selectFeature = [];
      for (let i = 0; i < selectCandidateFeatures.length; i++) {
        if (selectCandidateFeatures[i].get('ground') === 'press_sensor') {
          selectFeature.push(selectCandidateFeatures[i].get('data_set'));
        } else if (selectCandidateFeatures[i].get('ground') === 'water') {
          selectFeature.push({
            ...selectCandidateFeatures[i].get('data_set'),
            ground_set: 'water',
          });
        } else if (selectCandidateFeatures[i].get('ground') === 'workstations1') {
          selectFeature.push({
            ...selectCandidateFeatures[i].get('data_set'),
            ground_set: 'workstations1',
          });
        } else if (selectCandidateFeatures[i].get('ground') === 'appendage') {
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'appendage',
          });
        } else if (selectCandidateFeatures[i].get('ground') === 'characteristic') {
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'characteristic',
          });
        } else {
          selectFeature.push({
            ...selectCandidateFeatures[i].values_,
            ground_set: 'pipe',
          });
        }

      }
      console.log('selectFeature', selectFeature)
      that.setState({
        selectFeature: selectFeature,
        selectModal: true,
        canDrag: false,
      });

    });

    dragBox.on('boxstart', function () {
      console.log('boxstart');
      selectedFeatures.clear();
    });


    //绘制弹出框
    let press_container = document.getElementById('press-popup');
    let header = document.getElementById('popup-header');
    let popupCloser = document.getElementById('popup-closer');
    let press_popup = new Overlay({
      //设置弹出框的容器
      element: press_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    popupCloser.addEventListener('click', function () {
      press_popup.setPosition(undefined);
    });

    //绘制water弹出框
    let water_container = document.getElementById('water-popup');
    let water_header = document.getElementById('water-header');
    let water_popupCloser = document.getElementById('water-closer');
    let water_popup = new Overlay({
      element: water_container,
      autoPan: true,
    });
    water_popupCloser.addEventListener('click', function () {
      water_popup.setPosition(undefined);
    });

    //绘制workstations1弹出框
    let workstations1_container = document.getElementById('workstations1-popup');
    let workstations1_header = document.getElementById('workstations1-header');
    let workstations1_popupCloser = document.getElementById('workstations1-closer');
    let workstations1_popup = new Overlay({
      //设置弹出框的容器
      element: workstations1_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    workstations1_popupCloser.addEventListener('click', function () {
      workstations1_popup.setPosition(undefined);
      if (that.oneWorkstations1DataTimer) {
        clearTimeout(that.oneWorkstations1DataTimer);
      }

    });


    //绘制附属物特征值弹出框
    let appendageCharac_container = document.getElementById('appendageCharac-popup');
    let appendageCharac_header = document.getElementById('appendageCharac-header');
    let appendageCharac_popupCloser = document.getElementById('appendageCharac-closer');
    let appendageCharac_popup = new Overlay({
      //设置弹出框的容器
      element: appendageCharac_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    appendageCharac_popupCloser.addEventListener('click', function () {
      appendageCharac_popup.setPosition(undefined);
    });

    //绘制管道弹出框
    let pipe_container = document.getElementById('pipe-popup');
    let pipe_header = document.getElementById('pipe-header');
    let pipe_closer = document.getElementById('pipe-closer');
    let pipe_popup = new Overlay({
      //设置弹出框的容器
      element: pipe_container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
    });
    pipe_closer.addEventListener('click', function () {
      pipe_popup.setPosition(undefined);
    });

    map.on(['click'], function (e) {
      var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        return feature;
      });
      if (feature) {
        console.log('feature', feature);
        let ground = feature.get('ground');

        if (ground === 'press_sensor') {
          let coordinates = feature.getGeometry().getCoordinates();
          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          if (data_set.ground_set === 'press_sensor') {
            that.setState({
              editRecord: data_set,
            });
            that.fetchConstructionDate(data_set.id);
            that.fetOnePointData(data_set.id, coordinates, header, iconName, press_popup);
            pipe_popup.setPosition(undefined);
            water_popup.setPosition(undefined);
            workstations1_popup.setPosition(undefined);
            appendageCharac_popup.setPosition(undefined);
          }

        } else if (ground === 'water') {
          let coordinates = feature.getGeometry().getCoordinates();

          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          console.log('data_set', data_set);
          that.fetchConstructionDate(iconName);
          that.fetOneWaterData(iconName, coordinates, water_header, water_popup);
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);

        } else if (ground === 'workstations1') {
          console.log('workstations1');
          let coordinates = feature.getGeometry().getCoordinates();
          let iconName = feature.get('name');
          let data_set = feature.get('data_set');
          // console.log('data_set', data_set);
          if (data_set.ground_set === 'workstations1') {
            that.setState({
              editRecord: data_set,
            });
            that.fetchConstructionDate(data_set.id);

            that.fetOneWorkstations1(data_set.id, coordinates, workstations1_header, iconName, workstations1_popup);
          }
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
        } else if (feature.get('长度')) {
          let coordinates = e.coordinate;
          let coordinates2 = feature.getGeometry().getCoordinates();
          console.log('coordinates2', coordinates2);
          pipe_header.innerHTML = '<span>现状管道 </span>' + feature.get('id');
          that.fetchPipeConstructionDate(feature.get('id'));
          that.fetchPipeStreet(feature.get('id'));
          that.setState({
            pipePointData: {
              id: feature.get('id'),
              ['sid']: feature.get('sid'),
              ['起点埋深']: feature.get('起点埋深'),
              ['终点埋深']: feature.get('终点埋深'),
              ['材质']: feature.get('材质'),
              ['埋设方式']: feature.get('埋设方式'),
              ['线型']: feature.get('线型'),
              ['管径']: feature.get('管径'),
              ['长度']: feature.get('长度'),
              ['起点经纬度']: `(${toLonLat(coordinates2[0][0])[0].toFixed(6)},${toLonLat(coordinates2[0][0])[1].toFixed(6)})`,
              ['终点经纬度']: `(${toLonLat(coordinates2[0][1])[0].toFixed(6)},${toLonLat(coordinates2[0][1])[1].toFixed(6)})`,
            },
          });
          pipe_popup.setPosition(coordinates);
          that.map.addOverlay(pipe_popup);

          press_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
        } else if (feature.get('管点编号') && (feature.get('特征') || feature.get('附属物'))) {
          console.log('点击附属物/特征', feature.get('管点编号'));
          let coordinates = feature.getGeometry().getCoordinates();
          console.log('coordinates', coordinates);
          appendageCharac_header.innerHTML = '<span>附属物/特征 </span>' + feature.get('管点编号');
          let appendageCharacTable = `<tbody>`;
          for (let key in feature.values_) {
            console.log('key', key);
            // if (key === '管点编号') {
            //
            // } else
            if (feature.get(key) && key !== 'geometry' && key !== 'ground') {
              appendageCharacTable += `<tr> <td class='custom-table-title'>${key}</td>
              <td class='custom-table-value'>${feature.get(key)}</td></tr>`;
            }
          }
          appendageCharacTable += `<tr><td class='custom-table-title'>经纬度</td>
              <td class='custom-table-value'>(${toLonLat(coordinates)[0].toFixed(6)},${toLonLat(coordinates)[1].toFixed(6)})</td></tr>
              </tbody>`;

          that.setState({
            appendageCharacLatLag: [toLonLat(coordinates)[0], toLonLat(coordinates)[1]],
            appendageCharacId: feature.get('id'),
          });
          if (feature.get('附属物')) {

            request(`/images`, {
              method: 'get',
              params: {
                group: feature.get('管点编号'),
              },
            }).then((response) => {
              if (response.status === 200) {
                that.setState({
                  imgList: response.data.data,
                  editRecord: {
                    appendageId: feature.get('管点编号'),
                  },
                });
              }
            });
          } else {
            that.setState({
              editRecord: {},
              imgList: [],
            });
          }
          that.fetchConstructionDate(feature.get('管点编号'));

          appendageCharac_container.querySelector('.custom-table-detail').innerHTML = appendageCharacTable;
          appendageCharac_popup.setPosition(coordinates);
          that.map.addOverlay(appendageCharac_popup);


          press_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);

        }
      } else {
        if (e.type === 'click') {
          press_popup.setPosition(undefined);
          pipe_popup.setPosition(undefined);
          water_popup.setPosition(undefined);
          workstations1_popup.setPosition(undefined);
          appendageCharac_popup.setPosition(undefined);
          that.setState({
            construction_key: '',
            construction_date: '',
            valve_flowmeter_site_data: {},
          });
        }
        that.setState({
          editRecord: {},
          imgList: [],
        });

        if (that.onePointDataTimer) {
          clearTimeout(that.onePointDataTimer);
        }
        if (that.oneWorkstations1DataTimer) {
          clearTimeout(that.oneWorkstations1DataTimer);
        }
      }
    });

    map.on('moveend', function (e) {
      let zoom = map.getView().getZoom();  //获取当前地图的缩放级别
      let center = map.getView().getCenter();
      console.log((center));
      console.log(toLonLat(center));
      console.log(zoom);
      if (zoom < noSHowIcon && that.pressLayer) {
        that.pressLayer && that.pressLayer.setVisible(false);
        that.waterLayer && that.waterLayer.setVisible(false);
        that.workstations1Layer && that.workstations1Layer.setVisible(false);
      } else if (zoom >= noSHowIcon && that.pressLayer) {
        that.pressLayer && that.pressLayer.setVisible(true);
        that.waterLayer && that.waterLayer.setVisible(true);
        that.workstations1Layer && that.workstations1Layer.setVisible(true);

      }
      if (zoom < noSHowText && that.pressLayer) {
        const features = that.pressLayer.getSource().getFeatures();
        for (let i = 0; i < features.length; i++) {
          features[i].getStyle().getText().setText('');
        }
        // const waterfeatures = that.waterLayer.getSource().getFeatures();
        // for (let i = 0; i < waterfeatures.length; i++) {
        //   waterfeatures[i].getStyle().getText().setText('');
        // }
        const workstations1features = that.workstations1Layer.getSource().getFeatures();
        for (let i = 0; i < workstations1features.length; i++) {
          workstations1features[i].getStyle().getText().setText('');
        }

      } else if (zoom >= noSHowText && that.pressLayer) {
        const features = that.pressLayer.getSource().getFeatures();
        for (let i = 0; i < features.length; i++) {
          features[i].getStyle().getText().setText(features[i].get('name'));
        }
        if (that.waterLayer) {
          const waterfeatures = that.waterLayer.getSource().getFeatures();
          for (let i = 0; i < waterfeatures.length; i++) {
            waterfeatures[i].getStyle().getText().setText(waterfeatures[i].get('name'));
          }
        }

        if (that.workstations1Layer) {
          const workstations1features = that.workstations1Layer.getSource().getFeatures();
          for (let i = 0; i < workstations1features.length; i++) {
            workstations1features[i].getStyle().getText().setText(workstations1features[i].get('name'));
          }
        }

      }
      dispatch({
        type: 'pipe_home/changeCenterAndZoom',
        payload: {
          zoom, center: toLonLat(center),
        },
      });
    });

  };
  fetchConstructionDate = (key) => {
    const that = this;
    this.setState({
      construction_key: key,
    });
    request(`/guest/annotations/${key}`, {
      method: 'get',
    }).then((response) => {
      if (response.status === 200) {
        if (response.data.data.value) {
          that.setState({
            construction_date: response.data.data.value.construction_date,
            valve_flowmeter_site_data: response.data.data.value.valve_flowmeter_site_data ? response.data.data.value.valve_flowmeter_site_data : {},
          });
        } else {
          that.setState({
            construction_date: '',
            valve_flowmeter_site_data: {},
          });
        }

      }
    });
  };
  fetchPipeConstructionDate = (pipe_id) => {
    const that = this;
    request(`/guest/annotations/pipe_construction_date`, {
      method: 'get',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          originPipeValue: response.data.data.value,
        });
        if (response.data.data.value) {
          console.log('有value');
          if (response.data.data.value[`pipe${pipe_id}`]) {
            that.setState({
              construction_date: response.data.data.value[`pipe${pipe_id}`],
            });
          } else {
            that.setState({
              construction_date: '',
            });
          }
        } else {
          console.log('无value');
        }

      }
    });
  };
  fetchPipeStreet = (pipe_id) => {
    const that = this;
    request(`/guest/annotations/pipe_street`, {
      method: 'get',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          originStreetValue: response.data.data.value,
        });
        if (response.data.data.value) {
          console.log('有value');
          if (response.data.data.value[`street${pipe_id}`]) {
            that.setState({
              street: response.data.data.value[`street${pipe_id}`],
            });
          } else {
            that.setState({
              street: '',
            });
          }
        } else {
          console.log('无value');
        }

      }
    });
  };
  handleEditPipeDate = () => {
    const that = this;
    const formValues = this.PipeDateForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/annotations`, {
      method: 'POST',
      data: {
        key: 'pipe_construction_date',
        value: {
          ...this.state.originPipeValue,
          [`pipe${this.state.pipePointData.id}`]: formValues.date ? moment(formValues.date).format('YYYY-MM-DD') : '',
        },
        group: 'pipe_construction_date',
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('操作成功');
        that.setState({
          construction_date: formValues.date ? moment(formValues.date).format('YYYY-MM-DD') : '',
          pipeDateModal: false,
        });
      }
    });
  };
  handleEditPipeStreet = () => {
    const that = this;
    const formValues = this.PipeStreetForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/annotations`, {
      method: 'POST',
      data: {
        key: 'pipe_street',
        value: {
          ...this.state.originStreetValue,
          [`street${this.state.pipePointData.id}`]: formValues.street ? formValues.street : '',
        },
        group: 'pipe_street',
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('操作成功');
        that.setState({
          street: formValues.street ? formValues.street : '',
          streetModal: false,
        });

        that.fetchAllPipeStreet(function () {
          if (that.pipeVectorLayer) {
            that.map.removeLayer(that.pipeVectorLayer);
            that.pipeVectorSource = null;
          }
          that.renderPipe();
        })

      }
    });
  };
  handleEditPipeNumber = () => {
    const that = this;
    const formValues = this.EditChartParamsForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    if (!formValues.new) {
      message.error('请输入新的管点编号');
      return false;
    }
    console.log('this.state.appendageCharacId', this.state.appendageCharacId);
    axios(`http://test.zhsgy.top:7408/updateFeature`, {
      method: 'POST',
      data: {
        'dataStorage': 'newpipeline/newpipeline',
        'keyName': 'id',
        'keyValue': this.state.appendageCharacId,
        'updateFieldName': '管点编号',
        'updateFieldValue': formValues.new,
      },
    }).then(response => {
      console.log('response', response);
      if (response.status === 200) {
        message.success('修改站点编号成功')
      }
    })
      .catch((error) => {
        console.log('error', error);
      });
  };
  fetOnePointData = (id, coordinates, header, iconName, press_popup) => {
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetchPointData',
      payload: {
        id: id,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>压力传感器 : ' + iconName + '</span>';
          press_popup.setPosition(coordinates);
          this.map.addOverlay(press_popup);
        }
        if (that.onePointDataTimer) {
          clearTimeout(that.onePointDataTimer);
        }
        that.onePointDataTimer = setTimeout(function () {
          that.fetOnePointData(id);
        }, 10000);


      },
    });
  };
  fetOneWorkstations1 = (id, coordinates, header, iconName, popup) => {
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetOneWorkstations1',
      payload: {
        id: id,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>水务监控站点 : ' + iconName + '</span>';
          popup.setPosition(coordinates);
          this.map.addOverlay(popup);
        }
        if (that.oneWorkstations1DataTimer) {
          clearTimeout(that.oneWorkstations1DataTimer);
        }
        that.oneWorkstations1DataTimer = setTimeout(function () {
          that.fetOneWorkstations1(id);
        }, 10000);


      },
    });
  };
  fetOneWaterData = (iconName, coordinates, header, popup) => {
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/fetOneWaterData',
      payload: {
        name: iconName,
      },
      callback: () => {
        if (coordinates) {
          header.innerHTML = '<span>' + iconName + '</span>';
          popup.setPosition(coordinates);
          this.map.addOverlay(popup);
        }
        if (that.oneWaterDataTimer) {
          clearTimeout(that.oneWaterDataTimer);
        }
        that.oneWaterDataTimer = setTimeout(function () {
          that.fetOneWaterData(iconName);
        }, 10000);


      },
    });
  };
  setCenter = () => {
    let view = this.map.getView();
    // view.setZoom(14);
    const {pipe_home: {data, waterData}} = this.props;
    let Coordinates = [];
    for (let i = 0; i < data.length; i++) {
      Coordinates.push(fromLonLat([data[i].longitude, data[i].latitude]));
    }
    for (let i = 0; i < waterData.length; i++) {
      Coordinates.push(fromLonLat([waterData[i].longitude, waterData[i].latitude]));
    }
    let extent = boundingExtent(Coordinates);
    let center = getCenter(extent);   //获取边界区域的中心位置
    view.setZoom(10);
    view.setCenter(center);  //设置当前地图的显示中心位置

  };
  ZoonIn = () => {
    let view = this.map.getView();
    let zoom = view.getZoom();
    view.setZoom(zoom + 1);
  };
  ZoonOut = () => {
    let view = this.map.getView();
    let zoom = view.getZoom();
    view.setZoom(zoom - 1);
  };
  setPoint = (coord, data_set, img) => {
    let point = new Feature({
      geometry: new Point(fromLonLat(coord)),
      name: data_set.name,
      ground: 'press_sensor',
      data_set: data_set,
    });
    //设置图标的样式
    point.setStyle(this.setMakerStyle(point, img, (data_set.online_status) === 1));
    // if((data_set.online_status) === -1){
    //   this.addGifImg(point,img, false)
    // }
    return point;
  };
  addGifImg=(feature,img,status)=>{
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    console.log('addGifImg')
    // gif动态图的url链接
    const that=this;
    const gifUrl = yali_warm;
    // 使用Gifler将链接转化为gif图片
    const gif = window.gifler(gifUrl);
    gif.frames(
      document.createElement('canvas'),
      function (ctx, frame) {
        if (true) {
          feature.setStyle(
            new Style({
              ...feature.getStyle(),
              image: new Icon({
                ...feature.getStyle().image,
                img: ctx.canvas,
                imgSize: [frame.width, frame.height],
                opacity: 0.8,
              }),
              text: new Text({
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 12px 微软雅黑',
                offsetY: 22,
                //文本内容
                text: zoom < noSHowText ? '' : feature.get('data_set').name,
                //文本填充样式（即文字颜色）
                fill: new Fill({color: '#ffffff'}),
                backgroundFill: status ? new Fill({color: '#3b79fe'}) : new Fill({color: '#fe2a04'}),
                padding: [3, 0, 0, 3],
              }),
            })
          );
        }
        ctx.clearRect(0, 0, frame.width, frame.height);
        ctx.drawImage(frame.buffer, frame.x, frame.y);
        that.map.render();
      },
      true
    );
  }
  setMakerStyle = (feature, img, status) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: img,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('data_set').name,
        //文本填充样式（即文字颜色）
        fill: new Fill({color: '#ffffff'}),
        backgroundFill: status ? new Fill({color: '#3b79fe'}) : new Fill({color: '#fe2a04'}),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  setWorkstation1Point = (coord, data_set, img) => {
    let point = new Feature({
      geometry: new Point(fromLonLat(coord)),
      name: data_set.name,
      ground: 'workstations1',
      data_set: data_set,
    });
    //设置图标的样式
    point.setStyle(this.setWorkstation1MakerStyle(point, img,
      (data_set.online_status === -1 || data_set.alarm === 1) ? false : true));
    return point;
  };
  setWorkstation1MakerStyle = (feature, img, status) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: img,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('data_set').name,
        //文本填充样式（即文字颜色）
        fill: new Fill({color: '#ffffff'}),
        backgroundFill: status ? new Fill({color: '#3b79fe'}) : new Fill({color: '#fe2a04'}),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  setWaterMakerStyle = (feature) => {
    let zoom = this.map.getView().getZoom();  //获取当前地图的缩放级别
    return new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        //图标缩放比例
        scale: 1,
        //透明度
        opacity: 1,
        //图标的url
        src: water,
      }),
      text: new Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 12px 微软雅黑',
        offsetY: 22,
        //文本内容
        text: zoom < noSHowText ? '' : feature.get('name'),
        //文本填充样式（即文字颜色）
        fill: new Fill({color: '#ffffff'}),
        backgroundFill: new Fill({color: '#0064ff'}),
        padding: [3, 0, 0, 3],
      }),
    });
  };
  renderSensorStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case 4:
        status = 'error';
        explain = '子设备失联';
        break;
      case 1:
        status = 'warning';
        explain = '电池电压低';
        break;
      case 0:
        status = 'success';
        explain = '正常';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  renderOnlineStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case -1:
        status = 'error';
        explain = '离线';
        break;
      case 1:
        status = 'processing';
        explain = '在线';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  renderPressStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case 4:
        status = 'error';
        explain = '压力传感器故障';
        break;
      case 2:
        status = 'warning';
        explain = '压力高于上限阀值';
        break;
      case 1:
        status = 'warning';
        explain = '压力低于下限阀值';
        break;
      case 0:
        status = 'success';
        explain = '压力正常';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <Fragment>
        <Badge status={status}/>{explain}
      </Fragment>
    );
  };
  showWaterDetail = (name) => {
    let waterType = [];
    switch (name) {
      case '园艺场沉沙池':
        waterType = ['item1', 'item2'];
        break;
      case '塔尔郎水厂':
        waterType = ['item3', 'item4', 'item5'];
        break;
      case '老城区水厂':
        waterType = ['item6', 'item7', 'item8'];
        break;
      case '示范区水厂':
        waterType = ['item9', 'item10'];
        break;
      default:
        break;
    }
    this.setState({
      waterType: waterType,
      modalTitle: name,
      editModal: true,
    });
  };
  addInteraction = () => {
    let tip = document.querySelectorAll('.ol-tooltip-static');
    for (let i = 0; i < tip.length; i++) {
      tip[i].parentNode.removeChild(tip[i]);
    }
    const that = this;
    let formatArea = function (polygon) {
      // console.log('计算面积');
      let area = getArea(polygon);
      let output;
      if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
      } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
      }
      return output;
    };

    let formatLength = function (line) {
      console.log('计算长度');
      let length = getLength(line);
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
      } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm';
      }
      return output;
    };
    let measureTooltipElement;
    let measureTooltip;
    let createMeasureTooltip = function () {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement('div');
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
      measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      });
      that.map.addOverlay(measureTooltip);
    };


    let type = this.state.calculateType;
    if (this.drawVector) {
      this.map.removeLayer(this.drawVector);
      this.drawSource = null;
      this.drawVector = null;
      this.map.removeInteraction(this.draw);

    }
    let source = this.drawSource = new VectorSource({wrapX: false});

    let vector = this.drawVector = new Vector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    });
    this.map.addLayer(vector);
    let draw = this.draw = new Draw({
      source: source,
      type: type,
    });
    this.map.addInteraction(draw);
    createMeasureTooltip();
    let listener;
    let sketch;
    draw.on('drawstart', function (evt) {
      // set sketch
      sketch = evt.feature;
      listener = sketch.getGeometry().on('change', function (evt) {
        let geom = evt.target;
        let tooltipCoord = evt.coordinate;
        let output;
        if (geom instanceof Polygon) {
          let p = geom.clone();
          let circleIn4326 = p.transform(that.map.getView().getProjection(), 'EPSG:3857');
          output = formatArea(circleIn4326);
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof LineString) {
          let p = geom.clone();
          let circleIn4326 = p.transform(that.map.getView().getProjection(), 'EPSG:3857');
          output = formatLength(circleIn4326);
          tooltipCoord = geom.getLastCoordinate();
        }
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
      });
    });
    draw.on('drawend', function () {
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
      measureTooltip.setOffset([0, -7]);
      sketch = null;
      measureTooltipElement = null;
      createMeasureTooltip();
      unByKey(listener);
    });

  };
  handleAddImg = () => {
    const formValues = this.AddImgForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    let formData = new FormData();
    if (formValues.file) {
      formData.append('file', formValues.file.file);
    } else {
      message.error('请先选择图片');
      return false;
    }
    formData.append('group', this.state.editRecord.appendageId);
    formData.append('remark', formValues.remark);
    request(`/images`, {
      method: 'POST',
      data: formData,
    }).then((response) => {
      if (response.status === 200) {
        console.log('添加站点图片成功');
        message.success('添加图片成功');
        that.setState({
          imgModal: false,
        });
        request(`/images`, {
          method: 'get',
          params: {
            group: that.state.editRecord.appendageId,
          },
        }).then((response2) => {
          if (response.status === 200) {
            that.setState({
              imgList: response2.data.data,

            });
          }
        });
      }
    });

  };
  changeSearchValue = (value) => {
    console.log('value', value);
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'pipe_home/changeSearchText',
      payload: value,
      callback: () => {
        for (let i = 0; i < appendageCharacMap.length; i++) {
          dispatch({
            type: 'pipe_home/fetchAppendageCharac',
            payload: appendageCharacMap[i],
            callback: () => {
              console.log('fetchAppendageCharac callback');
              if (that[`${appendageCharacMap[i].key}VectorSource`]) {
                that.map.removeLayer(that[`${appendageCharacMap[i].key}VectorLayer`]);
                that[`${appendageCharacMap[i].key}VectorSource`] = null;
              }
              that.renderAppendageCharac(appendageCharacMap[i]);
            },
          });
        }
        setTimeout(function () {
          const {pipe_home: {appendageCheckedKeys, characteristicCheckedKeys}} = that.props;
          let points = [];
          for (let i = 0; i < appendageCharacMap.length; i++) {
            if (characteristicCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0 ||
              appendageCheckedKeys.indexOf(appendageCharacMap[i].key) >= 0
            ) {
              const appendageCharacData = that.props.pipe_home[appendageCharacMap[i].key];
              for (let j = 0; j < appendageCharacData.features.length; j++) {
                points.push(fromLonLat(appendageCharacData.features[j].geometry.coordinates));
              }
            }

          }
          if (points.length > 0) {
            let view = that.map.getView();
            let extent = boundingExtent(points);
            view.fit(extent, {padding: [100, 100, 100, 100]});
          }


        }, 500);


      },
    });
  };
  handleEditDate = () => {
    const that = this;
    const formValues = this.DateForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/annotations`, {
      method: 'POST',
      data: {
        key: this.state.construction_key,
        value: {
          'construction_date': formValues.date ? moment(formValues.date).format('YYYY-MM-DD') : '',
          valve_flowmeter_site_data: this.state.valve_flowmeter_site_data,
        },
        group: 'construction_date',
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('操作成功');
        that.setState({
          construction_date: formValues.date ? moment(formValues.date).format('YYYY-MM-DD') : '',
          constructionDateModal: false,
        });
      }
    });
  };
  handleEditSite = (data) => {
    let selectedRow = {};
    let valve_flowmeter_site_data = {};
    if (data) {
      valve_flowmeter_site_data = {
        id: data.id,
        name: data.name,
      };
    } else {
      selectedRow = this.EditSiteForm.state.selectedRow;
      console.log(selectedRow);
      valve_flowmeter_site_data = {
        id: selectedRow.id,
        name: selectedRow.name,
      };
    }
    const that = this;
    request(`/annotations`, {
      method: 'POST',
      data: {
        key: this.state.construction_key,
        value: {
          'construction_date': this.state.construction_date,
          valve_flowmeter_site_data: valve_flowmeter_site_data,
        },
        group: 'construction_date',
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('操作成功');
        that.setState({
          valve_flowmeter_site_data: {
            id: valve_flowmeter_site_data.id,
            name: valve_flowmeter_site_data.name,
          },
          editSiteModal: false,
        });
        if (!data && valve_flowmeter_site_data.id) {
          console.log('修改经纬度');
          request(`/workstations/${valve_flowmeter_site_data.id}`, {
            method: 'PUT',
            data: {
              ...selectedRow,
              longitude: this.state.appendageCharacLatLag[0],
              latitude: this.state.appendageCharacLatLag[1],
            },
          }).then((response) => {
            if (response.status === 200) {
            }
          });
        }
      }
    });
  };
  handleAdd = () => {
    const config = JSON.parse(JSON.stringify(this.findChildConfig()));
    console.log('config', config);
    const formValues = this.AddForm.props.form.getFieldsValue();
    config.hardware_configs.device[0].upload_interval = config.hardware_configs.device[0].upload_interval * 60;
    config.hardware_configs.modbus = config.hardware_configs.modbus_03;
    if (config.hardware_configs.sensor) {
      for (let i = 0; i < config.hardware_configs.sensor.length; i++) {
        if (config.hardware_configs.sensor[i] && config.hardware_configs.sensor[i].type !== 0) {
          config.hardware_configs.sensor[i].over_cancel = config.hardware_configs.sensor[i].over;
          config.hardware_configs.sensor[i].under_cancel = config.hardware_configs.sensor[i].under;
        }

      }
    }
    if (config.template === 1 || config.template === 3 || config.template === 4 || config.template === 5
      || config.template === 6 || config.template === 7 || config.template === 8) {
      formValues.type = 1;
      config.hardware_configs.flowmeter = [{}, {}];
      config.hardware_configs.flowmeter[0].enable = 0;
      config.hardware_configs.flowmeter[1].enable = 0;
    } else {
      formValues.type = 2;
    }
    console.log('config', config);
    console.log('appendageCharacLatLag', this.state.appendageCharacLatLag);
    const that = this;
    request(`/workstations`, {
      method: 'POST',
      data: {
        ...formValues,
        longitude: this.state.appendageCharacLatLag[0],
        latitude: this.state.appendageCharacLatLag[1],
        ...config,
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('添加站点成功');
        that.setState({
          addModal: false,
        });
        that.handleEditSite({
          id: response.data.data.id,
          name: response.data.data.name,
        });
      }
    });
  };

  renderSimpleForm() {
    const that = this
    const {
      form: {getFieldDecorator},
      dispatch, pipe_home: {
        searchText, bore, street,zoom,pipeData,pipeText
      },
    } = this.props;
    return (
      <Form layout={window.location.pathname==='/pipe_hsj_home'?'':'inline'} className="search-form map-search2">

        <FormItem style={{color: '#fff', fontWeight: "bold"}} label="附属物/特征管点编号">
          <Input size={'small'} style={{width: '100px'}} placeholder="请输入" onChange={(e) => {
            this.changeSearchValue(e.target.value)
          }}/>
        </FormItem>
        <FormItem style={{color: '#fff', fontWeight: "bold"}} label="管道编号">
          <Input size={'small'} defaultValue={pipeText} style={{width: '100px'}} placeholder="请输入" onChange={(e) => {
            const that = this;
            dispatch({
              type: 'pipe_home/changePipeText',
              payload: e.target.value,
              callback: () => {
                dispatch({
                  type: 'pipe_home/fetchPipe',
                  payload: {},
                  callback: () => {
                    console.log('callback');
                    if (that.pipeVectorLayer) {
                      that.map.removeLayer(that.pipeVectorLayer);
                      that.pipeVectorSource = null;
                    }
                    that.renderPipe();
                    if (pipeData.features.length > 0) {
                      let view = that.map.getView();
                      let Coordinates = [];
                      for (let i = 0; i < pipeData.features.length; i++) {
                        Coordinates.push(fromLonLat(pipeData.features[i].geometry.coordinates[0][0]));
                      }
                      let extent = boundingExtent(Coordinates);
                      view.fit(extent, {padding: [100, 100, 100, 100]});
                    }
                  }

                });
              }
            })
          }}/>
        </FormItem>
        <FormItem style={{color: '#fff', fontWeight: "bold"}} label="管道所在街道">
          <Input size={'small'} defaultValue={street} style={{width: '100px'}} placeholder="请输入" onChange={(e) => {
            const that = this;
            dispatch({
              type: 'pipe_home/changeStreet',
              payload: e.target.value,
              callback: () => {
                console.log('originStreetValue', that.state.originStreetValue)
                dispatch({
                  type: 'pipe_home/fetchPipe',
                  payload: {},
                  callback: () => {
                    console.log('callback');
                    if (that.pipeVectorLayer) {
                      that.map.removeLayer(that.pipeVectorLayer);
                      that.pipeVectorSource = null;
                    }
                    that.renderPipe();
                  }
                })
              },
            });
          }}/>
        </FormItem>
        <FormItem style={{color: '#fff', fontWeight: "bold"}} label="管道管径">
          <ASelect size={'small'} onChange={(value) => {
            console.log('value', value);
            dispatch({
              type: 'pipe_home/changeBore',
              payload: value,
              callback: () => {
                dispatch({
                  type: 'pipe_home/fetchPipe',
                  payload: {},
                  callback: () => {
                    console.log('callback');
                    if (that.pipeVectorLayer) {
                      that.map.removeLayer(that.pipeVectorLayer);
                      that.pipeVectorSource = null;
                    }
                    that.renderPipe();

                    for (let i = 0; i < appendageCharacMap.length; i++) {
                      dispatch({
                        type: 'pipe_home/fetchAppendageCharac',
                        payload: appendageCharacMap[i],
                        callback: () => {
                          console.log('fetchAppendageCharac callback');
                          if (that[`${appendageCharacMap[i].key}VectorSource`]) {
                            that.map.removeLayer(that[`${appendageCharacMap[i].key}VectorLayer`]);
                            that[`${appendageCharacMap[i].key}VectorSource`] = null;
                          }
                          that.renderAppendageCharac(appendageCharacMap[i]);
                        },
                      });
                    }

                  },
                });
              },
            });
          }} value={bore} style={{width: '100px'}}>
            {
              ['全部', 1000, 800, 600, 500, 400, 300, 200, 150, 100, 50, 40, 32, 25, 20].map((item, index) => {
                return <Option key={index} value={item}>{item}</Option>;
              })
            }
          </ASelect>
        </FormItem>
      </Form>
    );
  }

  render() {
    const {pipePointData} = this.state;
    const {
      dispatch, pipe_home: {
        data, bore, mapType, pointData, waterPointData, waterVisiable, pressVisiable, pipeData,
        showMapType, pipeVisiable, designCheckedKeys, pipeCount, pipeLength, workstations1PointData,
        workstations1Visiable, appendageCheckedKeys, characteristicCheckedKeys, searchText, CADCheckedKeys,
        ACAD3Data, ACAD2Data,showSearch,showRight
      },
    } = this.props;
    const that = this;
    return <div style={{
      height: '100%',
      width: '100%',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div id={'mapDiv'} style={{
        display: 'flex',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#000',
      }}>
      </div>
      <div id="press-popup" className="ol-popup">
        <a href="#" id="popup-closer" className="ol-popup-closer"></a>
        <div id="popup-header" className={'ol-popup-header'}></div>
        <div id="popup-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td className={'custom-table-title'}>上传时间</td>
              <td className={'custom-table-value'}>{pointData.upload_time}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>在线状态</td>
              <td className={'custom-table-value'}>{this.renderOnlineStatus(pointData.online_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>传感器状态</td>
              <td className={'custom-table-value'}>{this.renderSensorStatus(pointData.sensor_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>压力状态</td>
              <td className={'custom-table-value'}>{this.renderPressStatus(pointData.pressure_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>压力(MPA)</td>
              <td className={'custom-table-value'}>{pointData.pressure}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>电压(V)</td>
              <td className={'custom-table-value'}>{pointData.voltage}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>建设日期</td>
              <td className={'custom-table-value'}>{this.state.construction_date}
                {
                  find(this.permissions, {name: 'pipe_network_operation'}) &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      constructionDateModal: true,
                    });
                  }}> [修改]</span>
                }
              </td>
            </tr>

            </tbody>
          </table>
          {
            window.location.pathname!=='/pipe_hsj_home'&& <span onClick={() => {
              this.setState({
                infoModal: true,
              });
            }} className={'success'} style={{cursor: 'pointer'}}>查看详情</span>
          }

        </div>
      </div>
      <div id="water-popup" className="ol-popup">
        <a href="#" id="water-closer" className="ol-popup-closer"></a>
        <div id="water-header" className={'ol-popup-header'}></div>
        <div id="water-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            {
              waterPointData.name === '园艺场沉沙池' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>液位(m3)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item1}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>浊度(NTU)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item2}</td>
                </tr>

              </Fragment>
            }
            {
              waterPointData.name === '塔尔郎水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>进水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item3}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>出水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item4}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>取水口浊度(NTU)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item5}</td>
                </tr>
              </Fragment>
            }
            {
              waterPointData.name === '老城区水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>出水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item8}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>1#液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item7}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>2#/3#液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item6}</td>
                </tr>
              </Fragment>
            }
            {
              waterPointData.name === '示范区水厂' &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>采集时间</td>
                  <td className={'custom-table-value'}>{waterPointData.data.upload_time}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>水流量(m³/h)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item10}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>液位(m)</td>
                  <td className={'custom-table-value'}>{waterPointData.data.item9}</td>
                </tr>
              </Fragment>
            }
            <tr>
              <td className={'custom-table-title'}>建设日期</td>
              <td className={'custom-table-value'}>{this.state.construction_date}
                {
                  find(this.permissions, {name: 'pipe_network_operation'}) &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      constructionDateModal: true,
                    });
                  }}> [修改]</span>
                }
              </td>
            </tr>
            </tbody>
          </table>
          {/*  <span onClick={() => {
            this.showWaterDetail(waterPointData.name);
          }} className={'success'} style={{ cursor: 'pointer' }}>查看详情</span> */}
        </div>
      </div>
      <div id="workstations1-popup" className="ol-popup">
        <a href="#" id="workstations1-closer" className="ol-popup-closer"></a>
        <div id="workstations1-header" className={'ol-popup-header'}></div>
        <div id="workstations1-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td style={{textAlign: 'left'}} className={'custom-table-title'}>基本信息</td>
              <td className={'custom-table-value'}></td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>在线状态</td>
              <td className={'custom-table-value'}>{this.renderOnlineStatus(workstations1PointData.online_status)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>是否报警</td>
              <td className={'custom-table-value'}>{workstations1PointData.alarm == 1 ?
                <span className={styles.alarm} style={{padding: '1px 4px', color: '#fff'}}>报警</span> :
                <span style={{background: '#00b209', padding: '1px 4px', color: '#fff'}}>正常</span>}</td>
            </tr>
            <tr>
              <td style={{textAlign: 'left'}} className={'custom-table-title'}>数据</td>
              <td className={'custom-table-value'}></td>
            </tr>
            {
              (workstations1PointData.template === 1) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>阀前压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.faqian}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>阀后压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.fahou}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 9) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>阀前压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.shuangfafaqian}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>阀后压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.shuangfafahou}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 12 || workstations1PointData.template === 13 || workstations1PointData.template === 19 || workstations1PointData.template === 23|| workstations1PointData.template === 27) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>阀前压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.faqian}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>阀后压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.fahou}</td>
                </tr>
                {
                  (workstations1PointData.template === 12 || workstations1PointData.template === 13) &&
                  <tr>
                    <td className={'custom-table-title'}>液位(m)</td>
                    <td
                      className={'custom-table-value'}>{workstations1PointData.template === 12 ? workstations1PointData.yewei : workstations1PointData.yewei2}</td>
                  </tr>
                }
                {
                  (workstations1PointData.template === 19) &&
                  <tr>
                    <td className={'custom-table-title'}>液位(m)</td>
                    <td className={'custom-table-value'}>{workstations1PointData.yewei}</td>
                  </tr>
                }
                {
                  (workstations1PointData.template === 23) &&
                  <tr>
                    <td className={'custom-table-title'}>液位(m)</td>
                    <td className={'custom-table-value'}>{workstations1PointData.yewei3}</td>
                  </tr>
                }
                {
                  (workstations1PointData.template === 27) &&
                  <tr>
                    <td className={'custom-table-title'}>液位(m)</td>
                    <td className={'custom-table-value'}>{workstations1PointData.yeweiSensor2}</td>
                  </tr>
                }
              </Fragment>
            }
            {
              (workstations1PointData.template === 11) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>瞬时流量(m³/h)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.liuliang}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.faqian}</td>
                </tr>
              </Fragment>
            }
            {
              workstations1PointData.template === 15 &&
              <tr>
                <td className={'custom-table-title'}>瞬时流量(m³/h)</td>
                <td className={'custom-table-value'}>{workstations1PointData.liuliang}</td>
              </tr>
            }
            {
              (workstations1PointData.template === 16) &&
              <tr>
                <td className={'custom-table-title'}>液位(m)</td>
                <td className={'custom-table-value'}>{workstations1PointData.yeweiSensor0}</td>
              </tr>
            }
            {
              (workstations1PointData.template === 20) &&
              <tr>
                <td className={'custom-table-title'}>液位(m)</td>
                <td className={'custom-table-value'}>{workstations1PointData.yeweiSensor1}</td>
              </tr>
            }
            {
              (workstations1PointData.template === 24) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>瞬时流量(m³/h)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUliuliang}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>压力(MPa)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUyali}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 41) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>PH值</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUph}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>余氯(mg/L)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUresidual_chlorine}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>溶氧(mg/L)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUdissolved_oxygen}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>电导率(us/cm)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUconductivity}</td>
                </tr>
                <tr>
                  <td className={'custom-table-title'}>浊度(NUT)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUturbidity}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 42||workstations1PointData.template === 43) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>瞬时流量(m³/h)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUliuliang}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 44) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>液位(m)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUliquid_level}</td>
                </tr>
              </Fragment>
            }
            {
              (workstations1PointData.template === 42||workstations1PointData.template === 45) &&
              <Fragment>
                <tr>
                  <td className={'custom-table-title'}>液位(m)</td>
                  <td className={'custom-table-value'}>{workstations1PointData.RTUliquid_level}</td>
                </tr>
              </Fragment>
            }
            <tr>
              <td className={'custom-table-title'}>建设日期</td>
              <td className={'custom-table-value'}>{this.state.construction_date}
                {
                  find(this.permissions, {name: 'pipe_network_operation'}) &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      constructionDateModal: true,
                    });
                  }}> [修改]</span>
                }
              </td>
            </tr>
            </tbody>
          </table>
          {
            window.location.pathname !== '/pipe_hsj_home' &&
            <span onClick={() => {
              this.setState({
                workstationModal: true,
                editRecord: workstations1PointData,
              });
            }} className={'success'} style={{cursor: 'pointer'}}>查看详情</span>
          }
        </div>
      </div>
      <div id="pipe-popup" className="ol-popup" style={{opacity: '0.78'}}>
        <a href="#" id="pipe-closer" className="ol-popup-closer"></a>
        <div id="pipe-header" className={'ol-popup-header'}></div>
        <div id="pipe-content" className={'ol-popup-content'}>
          <table className={'custom-table'}>
            <tbody>
            <tr>
              <td className={'custom-table-title'}>id</td>
              <td className={'custom-table-value'}>{pipePointData.id}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>sid</td>
              <td className={'custom-table-value'}>{pipePointData['sid']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>起点埋深(m)</td>
              <td className={'custom-table-value'}>{pipePointData['起点埋深']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>终点埋深(m)</td>
              <td className={'custom-table-value'}>{pipePointData['终点埋深']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>埋设方式</td>
              <td className={'custom-table-value'}>{pipePointData['埋设方式']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>材质</td>
              <td className={'custom-table-value'}>{pipePointData['材质']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>线型</td>
              <td className={'custom-table-value'}>{pipePointData['线型']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>管径</td>
              <td className={'custom-table-value'}>{pipePointData['管径']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>长度(m)</td>
              <td className={'custom-table-value'}>{pipePointData['长度'] && pipePointData['长度'].toFixed(2)}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>起点经纬度</td>
              <td className={'custom-table-value'}>{pipePointData['起点经纬度']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>终点经纬度</td>
              <td className={'custom-table-value'}>{pipePointData['终点经纬度']}</td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>所在街道</td>
              <td className={'custom-table-value'}>{this.state.street}
                <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                  this.setState({
                    streetModal: true,
                  });
                }}> [修改]</span>
              </td>
            </tr>
            <tr>
              <td className={'custom-table-title'}>建设日期</td>
              <td className={'custom-table-value'}>{this.state.construction_date}
                {
                  find(this.permissions, {name: 'pipe_network_operation'}) &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      pipeDateModal: true,
                    });
                  }}> [修改]</span>
                }


              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="appendageCharac-popup" className="ol-popup">
        <a href="#" id="appendageCharac-closer" className="ol-popup-closer"></a>
        <div id="appendageCharac-header" className={'ol-popup-header'}></div>
        <div id="appendageCharac-content" className={'ol-popup-content'}>
          <table className={'custom-table custom-table-detail'}>
          </table>
          <table className={'custom-table'}>
            <tr>
              <td style={{width: '88px'}} className={'custom-table-title'}>附属物特征</td>
              <td className={'custom-table-value'}>
                <p style={{marginBottom: '0', cursor: 'pointer', color: '#009688'}} onClick={() => {
                  const that = this;
                  request(`/workstations/${this.state.valve_flowmeter_site_data.id}`, {
                    method: 'GET',
                  }).then((response) => {
                    if (response.status === 200) {
                      that.setState({
                        editRecord: response.data.data,
                        dataModal: true,
                      });
                    }
                  });

                }}>
                  {this.state.valve_flowmeter_site_data.name}
                </p>
                {!this.state.valve_flowmeter_site_data.name &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      addModal: true,
                    });
                  }}> [添加新站点]</span>
                }
                <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                  this.setState({
                    editSiteModal: true,
                  });
                }}> [链接现站点]</span></td>
            </tr>
            <tr>
              <td style={{width: '88px'}} className={'custom-table-title'}>建设日期</td>
              <td className={'custom-table-value'}>{this.state.construction_date}
                {
                  find(this.permissions, {name: 'pipe_network_operation'}) &&
                  <span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
                    this.setState({
                      constructionDateModal: true,
                    });
                  }}> [修改]</span>
                }

              </td>
            </tr>
          </table>
          {
            this.state.editRecord.appendageId &&
            <div style={{marginTop: '6px'}}>
              {
                this.state.imgList.map((item, index) => {

                  return <div key={index} style={{
                    position: 'relative', display: this.state.imgList.length > 1 ? 'inline-block' : 'block'
                    , width: this.state.imgList.length > 1 ? '49%' : '100%',
                  }}>
                    <div style={{position: 'absolute', right: '0', top: '0', cursor: 'pointer'}} onClick={() => {
                      confirm({
                        title: `确定要删除该图片吗吗?`,
                        content: '请谨慎操作',
                        okText: '确定',
                        okType: 'danger',
                        cancelText: '取消',
                        centered: true,
                        maskClosable: true,
                        onOk() {
                          request(`/images/${item.id}`, {
                            method: 'delete',
                          }).then((response) => {
                            if (response.status === 200) {
                              message.success('删除图片成功');
                              request(`/images`, {
                                method: 'get',
                                params: {
                                  group: that.state.editRecord.appendageId,
                                },
                              }).then((response2) => {
                                if (response.status === 200) {
                                  that.setState({
                                    imgList: response2.data.data,
                                  });
                                }
                              });
                            }
                          });
                        },
                        onCancel() {
                          console.log('Cancel');
                        },
                      });

                    }}>
                      <AIcon style={{fontSize: '16px', color: 'red'}} type="close-square"/>
                    </div>
                    <Zmage defaultPage={index} set={this.state.imgList.map((item, index) => {
                      return {src: item.path};
                    })} src={item.path} alt="" style={{width: '100%'}}/>
                    <h3 style={{textAlign: 'center'}}>{item.remark}</h3>
                  </div>;
                })
              }
              <Button type={'primary'} size={'small'} onClick={() => {
                this.setState({
                  imgModal: true,
                });
              }}>添加图片</Button>
            </div>
          }

        </div>
      </div>
      <div id="info"></div>
      {
        window.location.pathname!=='/pipe_hsj_home'&&
        <div className="summary-info" style={{top: '50px'}}>
          现状管道<span>{pipeCount}</span>根 总长<span>{pipeLength}</span>米
        </div>
      }

      <div className={`maptype ${showMapType ? 'maptype_active' : ''}`} style={{zIndex: '9',overflow:'visible'}}>
        <div>
          <Fragment>
            <h3>图层控制</h3>
            <div className="maptype_item">
              <img src={yaogan} alt=""/>
              <span className={mapType === 'sensing' ? 'active' : ''} onClick={() => {
                this.changeMapType('sensing');
              }}>遥感图</span>
            </div>
            <div className="maptype_item">
              <img src={jiedao} alt=""/>
              <span className={mapType === 'road' ? 'active' : ''} onClick={() => {
                this.changeMapType('road');
              }}>街道图</span>
            </div>
            <div className="maptype_item">
              <div style={{height: '100px', background: '#000'}}>

              </div>
              <span style={{right: '10px'}} className={mapType === 'cad' ? 'active' : ''} onClick={() => {
                this.changeMapType('cad');
              }}>黑色底图</span>
            </div>
          </Fragment>
          <div className="maptype_checkbox">
            <div>
              <Checkbox style={{marginLeft: '22px', marginBottom: '5px'}} checked={pressVisiable}
                        onChange={this.changePressLayerVisiable}>压力传感器<img
                src={yali_blue} alt=""/></Checkbox>
            </div>
            {/*  <div>
              <Checkbox style={{ marginLeft: '22px', marginBottom: '5px' }} checked={waterVisiable}
                        onChange={this.changeWaterLayerVisiable}>水厂监控设备<img
                src={water} alt=""/></Checkbox>
            </div> */}
            <div>
              <Checkbox style={{marginLeft: '22px', marginBottom: '5px'}} checked={workstations1Visiable}
                        onChange={this.changeWorkstations1Visiable}>水务监控站点<img
                src={shuang} alt=""/></Checkbox>
            </div>
            <div>
              <Checkbox style={{marginLeft: '22px', marginBottom: '5px'}} checked={pipeVisiable}
                        onChange={this.changePipeLayerVisiable}>现状管道(绿线)</Checkbox>
            </div>
            {/*<div>
            <Checkbox style={{ marginLeft: '27px', marginBottom: '5px' }} checked={holeCoverVisiable}
                      onChange={this.changeHoleCoverLayerVisiable}>井盖<img
              src={jinggai} alt=""/></Checkbox>
          </div>
          <div>
            <Checkbox style={{ marginLeft: '27px', marginBottom: '5px' }} checked={reduceValveVisiable}
                      onChange={this.changeReduceValveLayerVisiable}>减压阀<img
              src={jianyafa} alt=""/></Checkbox>
          </div>*/}
            <Tree
              checkable
              autoExpandParent
              checkedKeys={appendageCheckedKeys}
              onCheck={(checkedKeys, info) => {
                console.log('checkedKeys', checkedKeys);
                dispatch({
                  type: 'pipe_home/changeAppendageCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {pipe_home: {appendageCheckedKeys}} = this.props;
                    //阀门井
                    if (appendageCheckedKeys.indexOf('valveWell') >= 0) {
                      if (!that.valveWellVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'valveWell');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.valveWellVectorLayer);
                      that.valveWellVectorSource = null;
                    }

                    //阀门
                    if (appendageCheckedKeys.indexOf('valve') >= 0) {
                      if (!that.valveVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'valve');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.valveVectorLayer);
                      that.valveVectorSource = null;
                    }

                    //测量计
                    if (appendageCheckedKeys.indexOf('measuringMeter') >= 0) {
                      if (!that.measuringMeterVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'measuringMeter');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.measuringMeterVectorLayer);
                      that.measuringMeterVectorSource = null;
                    }

                    //消防栓
                    if (appendageCheckedKeys.indexOf('fireHydrant') >= 0) {
                      if (!that.fireHydrantVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'fireHydrant');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.fireHydrantVectorLayer);
                      that.fireHydrantVectorSource = null;
                    }

                    //水表（井）
                    if (appendageCheckedKeys.indexOf('waterMeterWell') >= 0) {
                      if (!that.waterMeterWellVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'waterMeterWell');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.waterMeterWellVectorLayer);
                      that.waterMeterWellVectorSource = null;
                    }

                    //排气阀（井）
                    if (appendageCheckedKeys.indexOf('exhaustValveWell') >= 0) {
                      if (!that.exhaustValveWellVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'exhaustValveWell');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.exhaustValveWellVectorLayer);
                      that.exhaustValveWellVectorSource = null;
                    }

                  },
                });
              }}
            >
              <TreeNode title="附属物" key="design">
                <TreeNode title={<span>阀门井 <img
                  src={famenjing}
                  alt=""/> ({this.props.pipe_home.valveWell && this.props.pipe_home.valveWell.features.length})</span>}
                          key="valveWell"/>
                <TreeNode title={<span>阀门 <img
                  src={famen2}
                  alt=""/> ({this.props.pipe_home.valve && this.props.pipe_home.valve.features.length})</span>}
                          key="valve"/>
                <TreeNode title={<span>测量计 <img
                  src={celiangji}
                  alt=""/> ({this.props.pipe_home.measuringMeter && this.props.pipe_home.measuringMeter.features.length})</span>}
                          key="measuringMeter"/>
                <TreeNode title={<span>消防栓 <img
                  src={xiaofanshuang}
                  alt=""/> ({this.props.pipe_home.fireHydrant && this.props.pipe_home.fireHydrant.features.length})</span>}
                          key="fireHydrant"/>
                <TreeNode title={<span>水表(井) <img
                  src={shuibiaojing}
                  alt=""/> ({this.props.pipe_home.waterMeterWell && this.props.pipe_home.waterMeterWell.features.length})</span>}
                          key="waterMeterWell"/>
                <TreeNode title={<span>排气阀(井) <img
                  src={paiqifa}
                  alt=""/> ({this.props.pipe_home.exhaustValveWell && this.props.pipe_home.exhaustValveWell.features.length})</span>}
                          key="exhaustValveWell"/>
              </TreeNode>
            </Tree>
            <Tree
              checkable
              autoExpandParent
              checkedKeys={characteristicCheckedKeys}
              onCheck={(checkedKeys, info) => {
                console.log('checkedKeys', checkedKeys);
                dispatch({
                  type: 'pipe_home/changeCharacteristicCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {pipe_home: {characteristicCheckedKeys}} = this.props;
                    //三通
                    if (characteristicCheckedKeys.indexOf('teeJoint') >= 0) {
                      if (!that.teeJointVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'teeJoint');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.teeJointVectorLayer);
                      that.teeJointVectorSource = null;
                    }

                    //四通
                    if (characteristicCheckedKeys.indexOf('quadJoint') >= 0) {
                      if (!that.quadJointVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'quadJoint');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.quadJointVectorLayer);
                      that.quadJointVectorSource = null;
                    }

                    //堵头
                    if (characteristicCheckedKeys.indexOf('plug') >= 0) {
                      if (!that.plugVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'plug');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.plugVectorLayer);
                      that.plugVectorSource = null;
                    }

                    //直线点
                    if (characteristicCheckedKeys.indexOf('straight') >= 0) {
                      if (!that.straightVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'straight');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.straightVectorLayer);
                      that.straightVectorSource = null;
                    }

                    //转折点
                    if (characteristicCheckedKeys.indexOf('turningPoint') >= 0) {
                      if (!that.turningPointVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'turningPoint');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.turningPointVectorLayer);
                      that.turningPointVectorSource = null;
                    }

                    //变径点
                    if (characteristicCheckedKeys.indexOf('changeDiameterPoint') >= 0) {
                      if (!that.changeDiameterPointVectorSource) {
                        const item = find(appendageCharacMap, (o) => o.key === 'changeDiameterPoint');
                        if (item) {
                          that.renderAppendageCharac(item);
                        }
                      }
                    } else {
                      that.map.removeLayer(that.changeDiameterPointVectorLayer);
                      that.changeDiameterPointVectorSource = null;
                    }

                  },
                });
              }}
            >
              <TreeNode title="特征" key="design">
                <TreeNode title={<span>三通 <img
                  src={santong}
                  alt=""/> ({this.props.pipe_home.teeJoint && this.props.pipe_home.teeJoint.features.length})</span>}
                          key="teeJoint"/>
                <TreeNode title={<span>四通 <img
                  src={sitong}
                  alt=""/> ({this.props.pipe_home.quadJoint && this.props.pipe_home.quadJoint.features.length})</span>}
                          key="quadJoint"/>
                <TreeNode title={<span>堵头 <img
                  src={dutou}
                  alt=""/> ({this.props.pipe_home.plug && this.props.pipe_home.plug.features.length})</span>}
                          key="plug"/>
                <TreeNode title={<span>直线点 <img
                  src={zhixiandian}
                  alt=""/> ({this.props.pipe_home.straight && this.props.pipe_home.straight.features.length})</span>}
                          key="straight"/>
                <TreeNode title={<span>转折点 <img
                  src={zhuanzhedian}
                  alt=""/> ({this.props.pipe_home.turningPoint && this.props.pipe_home.turningPoint.features.length})</span>}
                          key="turningPoint"/>
                <TreeNode title={<span>变径点 <img
                  src={bianjingdian}
                  alt=""/> ({this.props.pipe_home.changeDiameterPoint && this.props.pipe_home.changeDiameterPoint.features.length})</span>}
                          key="changeDiameterPoint"/>
              </TreeNode>
            </Tree>
            <Tree
              checkable
              autoExpandParent
              checkedKeys={designCheckedKeys}
              onCheck={(checkedKeys, info) => {
                dispatch({
                  type: 'pipe_home/changeDesignCheckenKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {pipe_home: {designCheckedKeys}} = this.props;
                    if (designCheckedKeys.indexOf('design1') >= 0) {
                      if (!that.designPipeVectorSource) {
                        that.renderDesignPipe();
                      }
                    } else {
                      that.map.removeLayer(that.designPipeVectorLayer);
                      that.designPipeVectorSource = null;
                    }
                    if (designCheckedKeys.indexOf('holeCover') >= 0) {
                      if (!that.holeCoverVectorSource) {
                        that.renderHoleCover();
                      }
                    } else {
                      that.map.removeLayer(this.holeCoverVectorLayer);
                      that.holeCoverVectorSource = null;
                    }

                    if (designCheckedKeys.indexOf('reduceValve') >= 0) {
                      if (!that.reduceValveVectorSource) {
                        that.renderReduceValve();
                      }
                    } else {
                      that.map.removeLayer(this.reduceValveVectorLayer);
                      that.reduceValveVectorSource = null;
                    }
                  },
                });
              }}
            >
              <TreeNode title="设计管网" key="design">
                <TreeNode title="设计管道(蓝线)" key="design1"/>
                <TreeNode title={<span>设计井盖<img
                  src={jinggai} alt=""/></span>} key="holeCover"/>
                <TreeNode title={<span>设计减压阀<img
                  src={jianyafa} alt=""/>
              </span>} key="reduceValve"/>
              </TreeNode>
            </Tree>
            <Tree
              checkable
              autoExpandParent
              checkedKeys={CADCheckedKeys}
              onCheck={(checkedKeys, info) => {
                dispatch({
                  type: 'pipe_home/changeCADCheckedKeys',
                  payload: checkedKeys,
                  callback: () => {
                    const {pipe_home: {CADCheckedKeys}} = this.props;
                    if (CADCheckedKeys.indexOf('design1') >= 0) {
                      if (!that.ACAD4VectorSource) {
                        that.renderACAD4();
                      }
                    } else {
                      that.map.removeLayer(that.ACAD4VectorLayer);
                      that.ACAD4VectorSource = null;
                    }

                    if (CADCheckedKeys.indexOf('design2') >= 0) {
                      if (!that.ACAD6VectorSource) {
                        that.renderACAD6();
                      }
                    } else {
                      that.map.removeLayer(that.ACAD6VectorLayer);
                      that.ACAD6VectorSource = null;
                    }


                    if (CADCheckedKeys.indexOf('design3') >= 0) { //实际对应GISServer的ACAD4
                      if (!that.ACAD3VectorSource) {
                        that.renderACAD3();
                      }
                    } else {
                      that.map.removeLayer(that.ACAD3VectorLayer);
                      that.ACAD3VectorSource = null;
                    }

                    if (CADCheckedKeys.indexOf('design4') >= 0) {
                      if (!that.ACAD2VectorSource) {
                        that.renderACAD2();
                      }
                    } else {
                      that.map.removeLayer(that.ACAD2VectorLayer);
                      that.ACAD2VectorSource = null;
                    }


                  },
                });
              }}
            >
              <TreeNode title="测绘图" key="design">
                <TreeNode title="道路图" key="design1"/>
                <TreeNode title="水系图" key="design2"/>
                {ACAD3Data.type && <TreeNode title="交通图" key="design3"/>}
                {/*{ACAD2Data.type&&<TreeNode title="居民地" key="design4"/>}*/}
              </TreeNode>
            </Tree>
            {/*    <h3>管道/附属物/特征管径</h3>
            <ASelect onChange={(value) => {
              console.log('value', value);
              dispatch({
                type: 'pipe_home/changeBore',
                payload: value,
                callback: () => {
                  dispatch({
                    type: 'pipe_home/fetchPipe',
                    payload: {},
                    callback: () => {
                      console.log('callback');
                      if (that.pipeVectorLayer) {
                        that.map.removeLayer(that.pipeVectorLayer);
                        that.pipeVectorSource = null;
                      }
                      that.renderPipe();

                      for (let i = 0; i < appendageCharacMap.length; i++) {
                        dispatch({
                          type: 'pipe_home/fetchAppendageCharac',
                          payload: appendageCharacMap[i],
                          callback: () => {
                            console.log('fetchAppendageCharac callback');
                            if (that[`${appendageCharacMap[i].key}VectorSource`]) {
                              that.map.removeLayer(that[`${appendageCharacMap[i].key}VectorLayer`]);
                              that[`${appendageCharacMap[i].key}VectorSource`] = null;
                            }
                            that.renderAppendageCharac(appendageCharacMap[i]);
                          },
                        });
                      }

                    },
                  });
                },
              });
            }} value={bore} style={{ width: '180px', margin: '0 10px 20px' }}>
              {
                ['全部', 1000, 800, 600, 500, 400, 300, 200, 150, 100, 50, 40, 32, 25, 20].map((item, index) => {
                  return <Option key={index} value={item}>{item}</Option>;
                })
              }
            </ASelect>*/}
          </div>
        </div>
        {
          window.location.pathname==='/pipe_hsj_home'&&
          <div style={{padding:'10px',position:'absolute',right:'100%',top:'0', background: 'rgba(0,0,0,0.73)',}}>
            <AIcon type={showMapType?"double-right":"double-left"} style={{fontSize:'26px',color:'#fff'}}  onClick={() => {
              dispatch({
                type: 'pipe_home/changeShowMapType',
                payload: !showMapType,
              });
            }}/>
          </div>
        }
      </div>
      {/*    <div className="map-search">
        <div style={{ display: 'inline-block', position: 'relative', top: '6px' }} title={'清空内容'}>
          <Button onClick={() => {

            this.changeSearchValue('');
            this.setState({
              searchKey: (Math.random() * 10).toString(),
            });
          }} type={'danger'} style={{ width: '45px', height: '29px' }} icon="delete"></Button></div>
        <div style={{ display: 'inline-block' }}>
          <Search key={this.state.searchKey} id={'search-input'} defaultValue={searchText} placeholder="请输入附属物/特征编号"
                  onSearch={this.changeSearchValue} enterButton/>
        </div>

      </div>*/}
      <div className="table-condition" style={{
        position: 'absolute', left: '0', top: '0', color: '#fff', right: window.location.pathname==='/pipe_hsj_home'?'':'0', padding: showSearch?'3px 10px':'0',
        background: 'rgba(0,0,0,0.7)'
      }}>
        {showSearch?this.renderSimpleForm():''}
        {window.location.pathname!=='/pipe_hsj_home'&&this.renderSimpleForm()}
        {
          window.location.pathname==='/pipe_hsj_home'&&
          <div style={{padding:'10px',position:'absolute',left:'100%',top:'0', background: 'rgba(0,0,0,0.73)',}}>
             <AIcon type={showSearch?"double-left":"double-right"} style={{fontSize:'26px'}}  onClick={() => {
               dispatch({
                 type: 'pipe_home/changeShowSearch',
                 payload: !showSearch,
               });
             }}/>
          </div>
        }

      </div>
      <div style={{
        background: 'rgba(0,0,0,0.73)',
        position: 'absolute',
        bottom: '16px',
        left: '16px',
        cursor: 'pointer',
        borderRadius: '12px',
        overflow: 'hidden',
      }} onClick={() => {
        this.setState({
          waterDeviceModal: true,
        });
      }}>
        <img style={{width: '64'}} src={shuichuang10} alt=""/>
        <h3 style={{textAlign: 'center', color: '#fff'}}>水厂</h3>
      </div>
      <div className="map_control" style={{display: window.location.pathname==='/pipe_hsj_home'?'none':'flex'}}>
        <Tooltip title={'全图'}>
          <div className="map_control_item" onClick={this.setCenter}>

            <AIcon type="border-outer"/>
          </div>
        </Tooltip>
        <Tooltip title={'放大'}>
          <div className="map_control_item" onClick={this.ZoonIn}>

            <AIcon type="plus-circle"/>

          </div>
        </Tooltip>
        <Tooltip title={'缩小'}>
          <div className="map_control_item" onClick={this.ZoonOut}>

            <AIcon type="minus-circle"/>

          </div>
        </Tooltip>
        <Tooltip title={'框选'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              canDrag: true,
            });
          }}>

            <AIcon type="select"/>

          </div>
        </Tooltip>
        <Tooltip title={'截取当前地图'}>
          <div className="map_control_item" onClick={this.exportPDF}>

            <AIcon type="picture"/>

          </div>
        </Tooltip>
        <Tooltip title={'显示切换图层'}>
          <div className="map_control_item" onClick={() => {
            dispatch({
              type: 'pipe_home/changeShowMapType',
              payload: !showMapType,
            });
          }}>

            <AIcon type="snippets"/>

          </div>
        </Tooltip>
        <Tooltip title={'距离测算'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              calculateType: 'LineString',
            }, function () {
              this.addInteraction();
            });
          }}>
            <AIcon type="column-height"/>
          </div>
        </Tooltip>
        <Tooltip title={'面积测算'}>
          <div className="map_control_item" onClick={() => {
            this.setState({
              calculateType: 'Polygon',
            }, function () {
              this.addInteraction();
            });
          }}>
            <AIcon type="radius-setting"/>
          </div>
        </Tooltip>
        {
          (this.state.calculateType === 'LineString' || this.state.calculateType === 'Polygon') &&
          <div onClick={() => {
            if (this.drawVector) {
              this.map.removeLayer(this.drawVector);
              this.drawSource = null;
              this.drawVector = null;
              this.map.removeInteraction(this.draw);
              let tip = document.querySelectorAll('.ol-tooltip-static');
              let tip2 = document.querySelectorAll('.ol-tooltip-measure');
              for (let i = 0; i < tip.length; i++) {
                tip[i].parentNode.removeChild(tip[i]);
              }
              for (let i = 0; i < tip2.length; i++) {
                tip2[i].parentNode.removeChild(tip2[i]);
              }
            }
            this.setState({
              calculateType: '',
            });

          }} style={{right: this.state.calculateType === 'LineString' ? '60px' : '0px'}}
               className={'hidden-calculate'}>
            取消测算
          </div>
        }
      </div>
      <Drawer
        title={`${this.state.editRecord.name} 详情`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            infoModal: false,
          });
        }}
        zIndex={1100}
        width={700}
        visible={this.state.infoModal}
      >
        <Detail id={this.state.editRecord.id}></Detail>
      </Drawer>
      <Modal
        title={<BuildModalTitle visible={this.state.selectModal} modalClass="selectModal" title="选择信息"/>}
        visible={this.state.selectModal}
        destroyOnClose
        width={850}
        footer={[]}
        centered
        className="selectModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.selectedFeatures.clear();
          this.setState({selectModal: false, selectFeature: []});
        }}

      >
        <SelectModalContent pipeData={pipeData} showDetail={(row) => {
          this.setState({
            editRecord: row,
            infoModal: true,
          });
        }}
                            showWorkstationDetail={(item) => {
                              this.setState({
                                workstationModal: true,
                                editRecord: item,
                              });
                            }}

                            showWaterDetail={this.showWaterDetail}
                            selectFeature={this.state.selectFeature}

                            renderPipe={() => {
                              that.fetchAllPipeStreet(function () {
                                if (that.pipeVectorLayer) {
                                  that.map.removeLayer(that.pipeVectorLayer);
                                  that.pipeVectorSource = null;
                                }
                                that.renderPipe();
                              })
                            }}></SelectModalContent>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={this.state.modalTitle + '历史数据'}/>}
        destroyOnClose
        visible={this.state.editModal}
        width={1000}
        centered
        onOk={() => {
          this.setState({editModal: false, waterType: []});
        }}
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({editModal: false, waterType: []});
        }}

      >
        <Chart editRecord={this.state.waterType}></Chart>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.workstationModal} modalClass="workstationModal"
                                title={`${this.state.editRecord.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            workstationModal: false,
            editRecord: {},
          });
        }}
        width={1100}
        zIndex={1999}
        centered
        className="workstationModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.workstationModal}
        footer={null}
      >
        {
          this.state.editRecord.online_status === -1 &&
          <Alert message="站点设备当前离线" type="error"/>
        }

        {
          this.state.editRecord &&
          this.state.editRecord.template === 1 &&
          <ValveData
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 2 &&
          <ValveData2
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 3 &&
          <ValveData3
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 4 &&
          <ValveData4
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 5 &&
          <ValveData5
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 6 &&
          <ValveData6
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 7 &&
          <ValveData5
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 8 &&
          <ValveData8
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 9 &&
          <ValveData9
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 35 &&
          <ValveData35
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 36 &&
          <ValveData36
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 10 &&
          <ValveData10
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 11 &&
          <ValveData11
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 12 &&
          <ValveData12
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 22 &&
          <ValveData12
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 23 &&
          <ValveData23
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 19 &&
          <ValveData19
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 13 &&
          <ValveData13
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 14 &&
          <ValveData14
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 15 &&
          <ValveData15
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 16||this.state.editRecord.template === 17||this.state.editRecord.template === 18) &&
          <ValveData16
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 20) &&
          <ValveData20
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 21) &&
          <ValveData21
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 24) &&
          <ValveData24
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 25) &&
          <ValveData25
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 27) &&
          <ValveData27
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 26) &&
          <ValveData26
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 29) &&
          <ValveData29
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 40) &&
          <ValveData40
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.dataModal} modalClass="dataModal"
                                title={`${this.state.editRecord.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            dataModal: false,
            editRecord: {},
          });
        }}
        width={1100}
        zIndex={1999}
        centered
        className="dataModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.dataModal}
        footer={null}
      >
        {
          this.state.editRecord.online_status === -1 &&
          <Alert message="站点设备当前离线" type="error"/>
        }

        {
          this.state.editRecord &&
          this.state.editRecord.template === 1 &&
          <ValveData
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 2 &&
          <ValveData2
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 3 &&
          <ValveData3
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 4 &&
          <ValveData4
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 5 &&
          <ValveData5
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 6 &&
          <ValveData6
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 7 &&
          <ValveData5
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 8 &&
          <ValveData8
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 9 &&
          <ValveData9
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 35 &&
          <ValveData35
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 36 &&
          <ValveData36
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 10 &&
          <ValveData10
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 11 &&
          <ValveData11
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 12 &&
          <ValveData12
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 22 &&
          <ValveData12
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 23 &&
          <ValveData23
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 19 &&
          <ValveData19
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 13 &&
          <ValveData13
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 14 &&
          <ValveData14
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 15 &&
          <ValveData15
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 16||this.state.editRecord.template === 17||this.state.editRecord.template === 18) &&
          <ValveData16
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 20) &&
          <ValveData20
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 21) &&
          <ValveData21
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 24) &&
          <ValveData24
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 25) &&
          <ValveData25
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 27) &&
          <ValveData27
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 26) &&
          <ValveData26
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 29) &&
          <ValveData29
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 40) &&
          <ValveData40
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.imgModal} modalClass="imgModal"
                                title={`添加 ${this.state.editRecord.appendageId} 图片`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            imgModal: false,
          });
        }}
        width={600}
        centered
        className="imgModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.imgModal}
        onOk={this.handleAddImg}
      >
        <AddImg
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.AddImgForm = inst}
        />
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.waterDeviceModal} modalClass="waterDeviceModal"
                                title={`水厂监测点模型`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            waterDeviceModal: false,
          });
        }}
        width={1200}
        centered
        className="waterDeviceModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.waterDeviceModal}
        footer={null}
      >
        <div style={{height: '700px'}}>
          <WaterDevice/>
        </div>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.constructionDateModal} modalClass="constructionDateModal"
                                title={`修改建设日期`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            constructionDateModal: false,
          });
        }}
        centered
        className="constructionDateModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.constructionDateModal}
        onOk={this.handleEditDate}
      >
        <ConstructionDate construction_date={this.state.construction_date}
                          wrappedComponentRef={(inst) => this.DateForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.pipeDateModal} modalClass="pipeDateModal"
                                title={`修改建设日期`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            pipeDateModal: false,
          });
        }}
        centered
        className="pipeDateModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.pipeDateModal}
        onOk={this.handleEditPipeDate}
      >
        <ConstructionDate construction_date={this.state.construction_date}
                          wrappedComponentRef={(inst) => this.PipeDateForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.streetModal} modalClass="streetModal"
                                title={`修改所在街道`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            streetModal: false,
          });
        }}
        centered
        className="streetModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.streetModal}
        onOk={this.handleEditPipeStreet}
      >
        <Street street={this.state.street}
                wrappedComponentRef={(inst) => this.PipeStreetForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.pipeNumberModal} modalClass="pipeNumberModal"
                                title={`修改管点编号`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            pipeNumberModal: false,
          });
        }}
        centered
        className="pipeNumberModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.pipeNumberModal}
        onOk={this.handleEditPipeNumber}
      >
        <EditChartParams old={this.state.editRecord.appendageId} type={'管点编号'}
                         wrappedComponentRef={(inst) => this.EditChartParamsForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editSiteModal} modalClass="editSiteModal"
                                title={` ${this.state.editRecord.appendageId} 选择水务监控站点`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            editSiteModal: false,
          });
        }}
        centered
        className="editSiteModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        width={738}
        visible={this.state.editSiteModal}
        onOk={() => {
          this.handleEditSite();
        }}
      >
        <EditSite valve_flowmeter_site_data={this.state.valve_flowmeter_site_data}
                  wrappedComponentRef={(inst) => this.EditSiteForm = inst}/>

      </Modal>
      <Drawer
        title={`添加站点`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            addModal: false,
          });
        }}
        width={700}
        keyboard={false}
        visible={this.state.addModal}
      >
        <AddOrEditMeter
          onClose={() => {
            this.setState({
              addModal: false,
            });
          }}
          getConfigFunc={(cb) => {
            this.findChildConfig = cb;
          }}
          findChildFunc={(cb) => {
            this.findChildLocation = cb;
          }}
          fromPipeHome={true}
          onSave={this.handleAdd}
          wrappedComponentRef={(inst) => this.AddForm = inst}
        />
      </Drawer>
      <Modal
        title={''}
        destroyOnClose
        onCancel={() => {
          this.setState({
            downloadModal: false,
          });
        }}
        centered
        maskClosable={false}
        visible={this.state.downloadModal}
        footer={null}
      >
        <Spin tip="正在下载图片,请耐心等候..." delay={500}>
          <div style={{background: '#b1d3fd', width: '100%', height: '150px', border: '1px solid blue'}}></div>
        </Spin>
      </Modal>
    </div>;
  }
}

export default BasicList;
